/* TreeHub panel chrome: quieter, shadcn-like topbar + sidebar on top of Filament 4 defaults. */

.fi-body {
    --topbar-height: 3.5rem;
    --th-border: rgb(231 229 228);          /* stone-200: surfaces */
    --th-border-soft: rgb(231 229 228 / 0.7);
    --th-control: rgb(214 211 209);         /* stone-300: inputs, outlined buttons */
    --th-control-strong: rgb(168 162 158);  /* stone-400: checkboxes, radios */
    --th-muted: rgb(120 113 108);           /* stone-500 */
    --th-muted-bg: rgb(245 245 244);        /* stone-100 */
    --th-active-bg: rgb(231 229 228 / 0.6);
    --th-fg: rgb(28 25 23);                 /* stone-900 */
    --th-surface: #ffffff;
    background-color: rgb(250 250 249);     /* stone-50 */
}

.dark .fi-body {
    --th-border: rgb(255 255 255 / 0.08);
    --th-border-soft: rgb(255 255 255 / 0.06);
    --th-control: rgb(255 255 255 / 0.2);
    --th-control-strong: rgb(255 255 255 / 0.32);
    --th-muted: rgb(168 162 158);
    --th-muted-bg: rgb(255 255 255 / 0.04);
    --th-active-bg: rgb(255 255 255 / 0.08);
    --th-fg: rgb(250 250 249);
    --th-surface: rgb(12 10 9);
    background-color: rgb(12 10 9);
}

/* ---------- topbar ---------- */
.fi-topbar {
    background-color: var(--th-surface);
    box-shadow: none;
    border-bottom: 1px solid var(--th-border);
    padding-inline: 1rem;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-topbar-start {
    margin-inline-end: 1.5rem;
}

.fi-topbar-start .fi-logo {
    margin-inline-start: 0.25rem;
}

.fi-topbar-end {
    gap: 0.5rem;
}

/* global search: compact bordered field */
.fi-global-search-field .fi-input-wrp {
    width: 15rem;
    min-height: 2.125rem;
    border-radius: 0.5rem;
    background-color: var(--th-surface);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    border: 1px solid var(--th-control);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fi-global-search-field .fi-input-wrp:focus-within {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 18%, transparent);
}

.fi-global-search-field .fi-input-wrp .fi-icon {
    width: 1rem;
    height: 1rem;
    color: var(--th-muted);
}

.fi-global-search-field .fi-input {
    font-size: 0.8125rem;
    padding-block: 0.375rem;
}

.fi-global-search-field .fi-input::placeholder {
    color: var(--th-muted);
}

/* user menu avatar */
.fi-user-menu .fi-avatar {
    width: 1.75rem;
    height: 1.75rem;
    box-shadow: 0 0 0 1px var(--th-border);
}

/* ---------- sidebar ---------- */
.fi-sidebar {
    border-inline-end: 1px solid var(--th-border);
}

@media (min-width: 1024px) {
    .fi-sidebar {
        background-color: rgb(250 250 249);
    }

    .dark .fi-sidebar {
        background-color: rgb(12 10 9);
    }
}

.fi-sidebar-nav {
    padding: 1.25rem 1rem 1.5rem;
    gap: 1.25rem;
}

.fi-sidebar-nav-groups {
    margin-inline: 0;
    gap: 1.25rem;
}

.fi-sidebar-group-btn {
    padding: 0.25rem 0.5rem;
    gap: 0.5rem;
}

.fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5rem;
    color: var(--th-muted);
}

.fi-sidebar-group-collapse-btn {
    width: 1.5rem;
    height: 1.5rem;
}

.fi-sidebar-group-collapse-btn .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--th-muted);
}

.fi-sidebar-group-items,
.fi-sidebar-sub-group-items {
    gap: 0.125rem;
}

.fi-sidebar-item-btn {
    padding: 0.4375rem 0.5rem;
    gap: 0.625rem;
    border-radius: 0.5rem;
}

.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item-icon {
    width: 1.0625rem;
    height: 1.0625rem;
    color: var(--th-muted);
}

.fi-sidebar-item-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgb(68 64 60);                   /* stone-700 */
}

.dark .fi-sidebar-item-label {
    color: rgb(214 211 209);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: var(--th-active-bg);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--th-active-bg);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--th-fg);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
    background-color: var(--th-fg);
}

.fi-sidebar-item-grouped-border {
    width: 1.0625rem;
    height: 1.0625rem;
}

/* ---------- page header ---------- */
.fi-header-heading {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

@media (min-width: 640px) {
    .fi-header-heading {
        font-size: 1.5rem;
    }
}

.fi-header .fi-breadcrumbs {
    margin-bottom: 0.375rem;
}

.fi-breadcrumbs-item-label {
    font-size: 0.8125rem;
}

.fi-page-header-main-ctn {
    padding-block: 1.5rem;
    gap: 1.5rem;
}

/* ---------- surfaces: hairline borders instead of shadow + ring ---------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    border: 1px solid var(--th-border);
}

/* ---------- buttons ---------- */
.fi-btn {
    border-radius: 0.5rem;
    font-weight: 500;
}

.fi-btn.fi-size-md {
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
}

.fi-btn.fi-size-sm {
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
}

.fi-btn.fi-color:not(.fi-outlined):not(.fi-btn-link) {
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.08), 0 1px 1px rgb(0 0 0 / 0.04);
}

.fi-btn.fi-outlined {
    --tw-ring-color: var(--th-control);
    background-color: var(--th-surface);
}

.fi-btn.fi-outlined.fi-color-gray {
    color: var(--th-fg);
}

.fi-btn.fi-outlined.fi-color-gray > .fi-icon {
    color: var(--th-muted);
}

.fi-btn.fi-outlined:not(.fi-disabled):hover {
    background-color: var(--th-muted-bg);
}

.fi-btn.fi-btn-link,
.fi-link {
    font-weight: 500;
}

.fi-icon-btn {
    border-radius: 0.5rem;
}

/* ---------- inputs ---------- */
.fi-input-wrp {
    border-radius: 0.5rem;
    --tw-ring-color: var(--th-control);
}

.fi-input-wrp:not(.fi-disabled):not(.fi-invalid):focus-within {
    --tw-ring-color: var(--primary-600);
}

.fi-input,
.fi-select-input,
.fi-input-wrp textarea {
    font-size: 0.875rem;
}

.fi-input-wrp .fi-input,
.fi-input-wrp .fi-select-input {
    padding-block: 0.4375rem;
}

.fi-fo-field-label-content,
.fi-fo-field-wrp-label-content,
.fi-fo-field-wrp-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--th-fg);
}

.fi-fo-field-wrp-hint,
.fi-fo-field-wrp-helper-text,
.fi-fo-field-helper-text {
    font-size: 0.75rem;
    color: var(--th-muted);
}

.fi-checkbox-input,
.fi-radio-input {
    border-radius: 0.3rem;
    /* Filament draws the checkbox edge with a ring, not a border: recolour the ring */
    --tw-ring-color: var(--th-control-strong);
    border-color: var(--th-control-strong);
    background-color: var(--th-surface);
}

.fi-checkbox-input:checked,
.fi-radio-input:checked {
    border-color: var(--primary-600);
    background-color: var(--primary-600);
}

.fi-radio-input {
    border-radius: 999px;
}

/* sections and cards inside forms */
.fi-sc-section,
.fi-section {
    border-radius: 0.75rem;
}

.fi-section-header-heading,
.fi-sc-section-header-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.fi-section-header-description,
.fi-sc-section-header-description {
    font-size: 0.8125rem;
    color: var(--th-muted);
}

.fi-tabs {
    border: 1px solid var(--th-border);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    border-radius: 0.625rem;
    background-color: var(--th-muted-bg);
    padding: 0.25rem;
}

.fi-tabs-item {
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}

.fi-tabs-item.fi-active {
    background-color: var(--th-surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

/* dropdowns and modals */
.fi-dropdown-panel {
    border-radius: 0.625rem;
    border: 1px solid var(--th-border);
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.18), 0 4px 10px -6px rgb(0 0 0 / 0.08);
}

.fi-dropdown-list-item {
    border-radius: 0.4rem;
    font-size: 0.8125rem;
}

.fi-modal-window {
    border-radius: 0.875rem;
    border: 1px solid var(--th-border);
    --tw-ring-shadow: 0 0 #0000;
}

/* badges */
.fi-badge {
    border-radius: 0.375rem;
    font-weight: 500;
    --tw-ring-shadow: 0 0 0 1px color-mix(in oklab, currentColor 18%, transparent);
}

/* tables */
.fi-ta-header-cell-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--th-muted);
}

.fi-ta-header-cell {
    background-color: rgb(250 250 249 / 0.8);
}

.dark .fi-ta-header-cell {
    background-color: rgb(255 255 255 / 0.02);
}

.fi-ta-row:hover {
    background-color: rgb(250 250 249);
}

.dark .fi-ta-row:hover {
    background-color: rgb(255 255 255 / 0.02);
}

.fi-ta-text-item {
    font-size: 0.8125rem;
}

.fi-ta-table td,
.fi-ta-table th {
    border-color: var(--th-border);
}

/* pagination repeated above the rows: one compact row shared with search and filters */
.fi-ta-header-ctn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--th-border);
}

@media (min-width: 640px) {
    .fi-ta-header-ctn {
        padding-inline: 1.5rem;
    }
}

.fi-ta-header-ctn > .th-ta-pagination-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
}

/* search + filters take the rest of the row and drop to their own line when it gets tight */
.fi-ta-ctn .fi-ta-header-ctn > .fi-ta-header-toolbar {
    flex: 1 1 20rem;
    justify-content: flex-end;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
}

.fi-ta-ctn .fi-ta-header-ctn > .fi-ta-header-toolbar .fi-ta-search-field .fi-input-wrp {
    min-width: 12rem;
}

.th-ta-pagination-header .fi-pagination {
    /* flatten the nav so the overview and page buttons sit directly in the header row */
    display: contents;
}

.th-ta-pagination-header .fi-pagination-overview {
    display: inline;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--th-muted);
    white-space: nowrap;
}

.th-ta-pagination-header .fi-pagination-records-per-page-select-ctn,
.th-ta-pagination-header .fi-pagination-previous-btn,
.th-ta-pagination-header .fi-pagination-next-btn {
    display: none;
}

.th-ta-pagination-header .fi-pagination-items {
    display: flex;
    --tw-ring-color: var(--th-control);
}

.th-ta-pagination-header .fi-pagination-item-btn {
    padding: 0.3rem 0.5rem;
}

.th-ta-pagination-header .fi-pagination-item-label {
    font-size: 0.75rem;
}

.th-ta-pagination-header .fi-pagination-item-btn .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
}

@media (max-width: 639px) {
    .th-ta-pagination-header .fi-pagination-overview {
        display: none;
    }
}

.th-ta-count {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--th-muted);
}

/* ---------- dashboard ---------- */
.th-dash-hello {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.25rem 0 0.5rem;
}

.th-dash-hello-date {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--th-muted);
}

.th-dash-hello-title {
    margin: 0;
    font-family: var(--serif-font-family, Georgia, serif);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--th-fg);
}

.th-dash-hello-sub {
    margin: 0.5rem 0 0;
    max-width: 60ch;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--th-muted);
}

.th-dash-hello-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.th-dash-table-wrap {
    overflow-x: auto;
    margin: -0.25rem -0.25rem 0;
}

.th-dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.th-dash-table th {
    padding: 0.25rem 0.5rem 0.625rem;
    text-align: start;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--th-muted);
    border-bottom: 1px solid var(--th-border);
    white-space: nowrap;
}

.th-dash-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--th-border-soft);
    vertical-align: middle;
    color: var(--th-fg);
}

.th-dash-table tr:last-child td {
    border-bottom: 0;
}

.th-dash-table tr.is-muted td {
    opacity: 0.55;
}

.th-dash-table .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.th-dash-table .num.warn {
    color: rgb(180 83 9);
    font-weight: 600;
}

.th-dash-table .num.bad {
    color: rgb(185 28 28);
    font-weight: 600;
}

.th-dash-sub {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--th-muted);
}

.th-dash-channel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.th-dash-channel-name {
    font-weight: 500;
}

.th-dash-channel-meta {
    font-size: 0.72rem;
    color: var(--th-muted);
}

.th-dash-market {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 0.375rem;
    background-color: color-mix(in oklab, var(--primary-600) 10%, transparent);
    color: var(--primary-700);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.dark .th-dash-market {
    color: var(--primary-300);
}

.th-dash-market-sm {
    min-width: 0;
    height: 1.125rem;
    padding: 0 0.3rem;
    font-size: 0.62rem;
    margin-inline-start: 0.35rem;
    vertical-align: 1px;
}

.th-dash-tag {
    display: inline-block;
    margin-inline-start: 0.35rem;
    padding: 0 0.3rem;
    border-radius: 0.25rem;
    border: 1px solid var(--th-border);
    font-size: 0.62rem;
    color: var(--th-muted);
    vertical-align: 1px;
}

.th-dash-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.5rem;
    border-radius: 999px;
    background: rgb(168 162 158);
    vertical-align: middle;
}

.th-dash-dot.live { background: rgb(22 163 74); box-shadow: 0 0 0 3px rgb(22 163 74 / 0.18); }
.th-dash-dot.dry_run { background: rgb(217 119 6); box-shadow: 0 0 0 3px rgb(217 119 6 / 0.18); }

.th-dash-when {
    white-space: nowrap;
    color: var(--th-muted);
    font-size: 0.75rem;
}

.th-dash-links {
    text-align: end;
    white-space: nowrap;
}

.th-dash-links a,
.th-dash-more {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary-700);
    margin-inline-start: 0.75rem;
}

.dark .th-dash-links a,
.dark .th-dash-more {
    color: var(--primary-300);
}

.th-dash-links a:hover,
.th-dash-more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.th-dash-list {
    list-style: none;
    margin: -0.25rem 0 0;
    padding: 0;
}

.th-dash-list > li + li {
    border-top: 1px solid var(--th-border-soft);
}

.th-dash-list-row,
.th-dash-job {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0.25rem;
    color: inherit;
    text-decoration: none;
    border-radius: 0.5rem;
}

.th-dash-list-tight .th-dash-job {
    padding-block: 0.5rem;
}

a.th-dash-list-row:hover {
    background-color: var(--th-muted-bg);
    margin-inline: -0.5rem;
    padding-inline: 0.75rem;
}

.th-dash-count {
    flex: none;
    min-width: 2.5rem;
    text-align: center;
    padding: 0.2rem 0.4rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background-color: var(--th-muted-bg);
    color: var(--th-muted);
}

.th-dash-count.warning { background-color: rgb(254 243 199); color: rgb(146 64 14); }
.th-dash-count.danger { background-color: rgb(254 226 226); color: rgb(153 27 27); }
.dark .th-dash-count.warning { background-color: rgb(217 119 6 / 0.18); color: rgb(252 211 77); }
.dark .th-dash-count.danger { background-color: rgb(220 38 38 / 0.18); color: rgb(252 165 165); }

.th-dash-list-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 0.1rem;
}

.th-dash-list-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--th-fg);
}

.th-dash-list-label a {
    color: inherit;
}

.th-dash-list-label a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.th-dash-list-hint {
    font-size: 0.75rem;
    color: var(--th-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.th-dash-list-arrow {
    color: var(--th-muted);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

a.th-dash-list-row:hover .th-dash-list-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.th-dash-status {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgb(168 162 158);
}

.th-dash-status.done { background: rgb(22 163 74); }
.th-dash-status.failed { background: rgb(220 38 38); box-shadow: 0 0 0 3px rgb(220 38 38 / 0.18); }
.th-dash-status.running { background: rgb(37 99 235); box-shadow: 0 0 0 3px rgb(37 99 235 / 0.18); }
.th-dash-status.queued { background: rgb(217 119 6); }

.th-dash-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--th-muted);
}

/* ---------- documentation page ---------- */
.th-docs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    max-width: 68rem;
}

@media (min-width: 1100px) {
    .th-docs {
        grid-template-columns: 13rem minmax(0, 1fr);
    }
}

.th-docs-toc {
    display: none;
}

@media (min-width: 1100px) {
    .th-docs-toc {
        display: block;
        position: sticky;
        top: calc(var(--topbar-height) + 1.5rem);
        align-self: start;
    }
}

.th-docs-toc-title {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--th-muted);
}

.th-docs-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-inline-start: 1px solid var(--th-border);
}

.th-docs-toc a {
    display: block;
    padding: 0.3rem 0.75rem;
    margin-inline-start: -1px;
    border-inline-start: 1px solid transparent;
    font-size: 0.8125rem;
    color: var(--th-muted);
    text-decoration: none;
}

.th-docs-toc a:hover {
    color: var(--th-fg);
    border-color: var(--th-control-strong);
}

.th-docs-body {
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--th-fg);
}

.th-docs-body section {
    padding: 2rem 0;
    border-top: 1px solid var(--th-border);
    scroll-margin-top: calc(var(--topbar-height) + 1rem);
}

.th-docs-hero {
    padding-bottom: 2rem;
}

.th-docs-kicker {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-700);
}

.dark .th-docs-kicker {
    color: var(--primary-300);
}

.th-docs-hero h1 {
    margin: 0 0 0.75rem;
    font-family: var(--serif-font-family, Georgia, serif);
    font-weight: 400;
    font-size: 1.9rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.th-docs-lead {
    margin: 0;
    max-width: 62ch;
    font-size: 0.95rem;
    color: var(--th-muted);
}

.th-docs-body h2 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.th-docs-body p,
.th-docs-body li,
.th-docs-body dd {
    max-width: 70ch;
}

.th-docs-body p {
    margin: 0 0 0.75rem;
}

.th-docs-body a {
    color: var(--primary-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in oklab, var(--primary-700) 35%, transparent);
}

.dark .th-docs-body a {
    color: var(--primary-300);
}

.th-docs-body a:hover {
    text-decoration-color: currentColor;
}

.th-docs-body code {
    padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
    background: var(--th-muted-bg);
    border: 1px solid var(--th-border);
    font-size: 0.8em;
}

.th-docs-body ul {
    margin: 0.25rem 0 0.75rem;
    padding-inline-start: 1.1rem;
}

.th-docs-body ul li {
    margin: 0.35rem 0;
}

.th-docs-steps {
    counter-reset: step;
    list-style: none;
    margin: 0.5rem 0 1rem;
    padding: 0;
}

.th-docs-steps li {
    position: relative;
    padding: 0.4rem 0 0.4rem 2.5rem;
    counter-increment: step;
}

.th-docs-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--primary-600);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.th-docs-flow {
    list-style: none;
    margin: 0.5rem 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.th-docs-flow li {
    display: flex;
    gap: 0.9rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--th-border);
    border-radius: 0.75rem;
    background: var(--th-surface);
}

.th-docs-flow li span {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4rem;
    background: var(--th-muted-bg);
    color: var(--th-muted);
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.th-docs-note {
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    background: color-mix(in oklab, var(--primary-600) 7%, transparent);
    border: 1px solid color-mix(in oklab, var(--primary-600) 18%, transparent);
    font-size: 0.85rem;
}

.th-docs-list {
    margin: 0;
    display: grid;
    gap: 1rem;
}

.th-docs-list > div {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--th-border);
}

.th-docs-list > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.th-docs-list dt {
    font-weight: 600;
    font-size: 0.875rem;
}

.th-docs-list dd {
    margin: 0;
    color: var(--th-fg);
}

@media (max-width: 640px) {
    .th-docs-list > div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

.th-docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.th-docs-table td {
    padding: 0.55rem 0.75rem 0.55rem 0;
    border-bottom: 1px solid var(--th-border);
    vertical-align: top;
}

.th-docs-table td:first-child {
    white-space: nowrap;
    width: 1%;
}

.th-docs-terms {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.th-docs-terms > div {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--th-border);
    border-radius: 0.6rem;
    background: var(--th-surface);
}

.th-docs-terms dt {
    font-weight: 600;
    font-size: 0.85rem;
}

.th-docs-terms dd {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--th-muted);
}

/* documentation mockups: static UI sketches drawn with the panel's own tokens */
.th-mock {
    margin: 1rem 0 1.25rem;
}

.th-mock-window {
    border: 1px solid var(--th-border);
    border-radius: 0.75rem;
    background: var(--th-surface);
    overflow: hidden;
    font-size: 0.78rem;
}

.th-mock-window-tight {
    padding: 0.75rem 0.9rem;
}

.th-mock figcaption {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--th-muted);
    max-width: 70ch;
}

.th-mock-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--th-border);
    background: rgb(250 250 249 / 0.7);
}

.dark .th-mock-bar {
    background: rgb(255 255 255 / 0.02);
}

.th-mock-bar-sub {
    border-top: 1px solid var(--th-border);
}

.th-mock-spacer {
    flex: 1;
}

.th-mock-pill {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--th-border);
    color: var(--th-muted);
}

.th-mock-link {
    color: var(--primary-700);
    font-weight: 500;
}

.dark .th-mock-link {
    color: var(--primary-300);
}

.th-mock-muted {
    color: var(--th-muted);
}

.th-mock-btn {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    border-radius: 0.45rem;
    background: var(--primary-600);
    color: #fff;
    font-weight: 500;
}

.th-mock-btn.is-outline {
    background: var(--th-surface);
    color: var(--th-fg);
    box-shadow: 0 0 0 1px var(--th-control);
}

.th-mock-matrix {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.th-mock-matrix th,
.th-mock-matrix td {
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--th-border);
    text-align: end;
    white-space: nowrap;
}

.th-mock-matrix th {
    font-weight: 500;
    color: var(--th-muted);
    text-align: start;
}

.th-mock-matrix thead th {
    text-align: end;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.th-mock-matrix tbody tr:last-child td,
.th-mock-matrix tbody tr:last-child th {
    border-bottom: 0;
}

.th-mock-matrix td.is-missing {
    color: rgb(180 83 9);
    background: rgb(254 243 199 / 0.5);
    font-weight: 600;
}

.th-mock-matrix td.is-editing {
    padding-block: 0.25rem;
}

.th-mock-matrix td em {
    font-style: normal;
    color: var(--primary-700);
    font-weight: 600;
}

.dark .th-mock-matrix td em {
    color: var(--primary-300);
}

.th-mock-input {
    display: inline-block;
    min-width: 6rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.4rem;
    background: var(--th-surface);
    box-shadow: 0 0 0 1px var(--primary-600), 0 0 0 4px color-mix(in oklab, var(--primary-500) 16%, transparent);
    text-align: start;
}

.th-mock-input.is-filled,
.th-mock-input.is-empty {
    box-shadow: 0 0 0 1px var(--th-control);
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.th-mock-input.is-empty {
    color: var(--th-muted);
}

.th-mock-caret {
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-inline-start: 1px;
    background: var(--th-fg);
    vertical-align: -0.1em;
    animation: th-caret 1s steps(2) infinite;
}

@keyframes th-caret {
    to { opacity: 0; }
}

.th-mock-hint {
    padding: 0.4rem 0.9rem;
    font-size: 0.72rem;
    color: var(--th-muted);
    border-top: 1px solid var(--th-border);
}

.th-mock-bulk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--th-border);
    background: color-mix(in oklab, var(--primary-600) 6%, transparent);
}

.th-mock-bulk label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--th-muted);
}

.th-mock-count {
    font-weight: 600;
}

.th-mock-select {
    padding: 0.15rem 0.5rem;
    border-radius: 0.4rem;
    background: var(--th-surface);
    box-shadow: 0 0 0 1px var(--th-control);
    color: var(--th-fg);
}

.th-mock-select::after {
    content: ' ⌄';
    color: var(--th-muted);
}

.th-mock-ops {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--th-border);
}

.th-mock-ops span {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--th-border);
    color: var(--th-muted);
}

.th-mock-ops span.is-on {
    border-color: var(--primary-600);
    color: var(--primary-700);
    background: color-mix(in oklab, var(--primary-600) 8%, transparent);
}

.th-mock-lane {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    overflow-x: auto;
}

.th-mock-lane-empty {
    justify-content: center;
    color: var(--th-muted);
    border: 1px dashed var(--th-control);
    margin: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
}

.th-mock-photo {
    flex: 0 0 11rem;
}

.th-mock-thumb {
    position: relative;
    height: 6.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--th-border);
}

.th-mock-thumb.t1 { background: linear-gradient(160deg, #e9e2d6, #cfc3b0 60%, #b7a892); }
.th-mock-thumb.t2 { background: linear-gradient(160deg, #dfe4dc, #b9c3b4 60%, #93a08c); }
.th-mock-thumb.t3 { background: linear-gradient(160deg, #efe9df, #d8cdbd 60%, #c2b39d); }

.th-mock-badge {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    background: var(--primary-600);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
}

.th-mock-alt {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.th-mock-alt > span:first-child {
    font-size: 0.68rem;
    color: var(--th-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.th-mock-channel {
    display: grid;
    gap: 0.6rem;
    padding: 0.8rem 0.9rem;
}

.th-mock-channel > div:first-child {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.th-mock-diff {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
}

.th-mock-diff span {
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
}

.th-mock-diff .d-changed { background: rgb(254 243 199); color: rgb(146 64 14); }
.th-mock-diff .d-added { background: rgb(220 252 231); color: rgb(22 101 52); }
.dark .th-mock-diff .d-changed { background: rgb(217 119 6 / 0.18); color: rgb(252 211 77); }
.dark .th-mock-diff .d-added { background: rgb(22 163 74 / 0.18); color: rgb(134 239 172); }

.th-mock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.th-mock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.th-mock-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--th-border);
}

.th-mock-chip i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgb(22 163 74);
}

.th-mock-chip.warn i {
    background: rgb(217 119 6);
}

.th-mock-lock {
    color: var(--th-muted);
    font-size: 0.75rem;
}

.th-docs-list-wide {
    grid-template-columns: 1fr !important;
}

/* ---- Monitoring sklepów ------------------------------------------------------- */

.th-mon { display: flex; flex-direction: column; gap: 1.5rem; }
.th-mon-link { font-size: 0.75rem; font-weight: 500; color: var(--primary-700); }
.dark .th-mon-link { color: var(--primary-300); }
.th-mon-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.th-mon-strong { font-weight: 600; color: var(--th-fg); }
.th-mon-hint { font-size: 0.75rem; color: var(--th-muted); }
.th-mon-kicker { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--th-muted); margin-bottom: 0.15rem; }
.th-mon-empty, .th-mon-error { font-size: 0.8125rem; color: var(--th-muted); }
.th-mon-error { color: rgb(185 28 28); }
.dark .th-mon-error { color: rgb(252 165 165); }

.th-mon-repo { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; font-size: 0.8125rem; }
.th-mon-repo-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; min-width: 0; }
.th-mon-repo-item .th-mon-kicker { flex-basis: 100%; }

.th-mon-runs { list-style: none; margin: 1rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--th-border-soft); display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8125rem; }
.th-mon-runs li { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.th-mon-runs a { color: var(--th-fg); }
.th-mon-runs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.th-mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1rem; }
.th-mon-card { border: 1px solid var(--th-border); border-radius: 0.75rem; background: var(--th-surface); padding: 1rem 1.125rem; min-width: 0; }
.th-mon-card.is-fail { border-color: rgb(220 38 38 / 0.45); }
.th-mon-card.is-off { opacity: 0.6; }
.th-mon-card-head { display: flex; align-items: center; gap: 0.75rem; }
.th-mon-card-title { flex: 1; min-width: 0; font-size: 0.875rem; }
.th-mon-card-title a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.th-mon-pill { flex: none; display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--th-muted-bg); color: var(--th-muted); white-space: nowrap; }
.th-mon-pill.ok { background: rgb(220 252 231); color: rgb(22 101 52); }
.th-mon-pill.warn { background: rgb(254 243 199); color: rgb(146 64 14); }
.th-mon-pill.fail { background: rgb(254 226 226); color: rgb(153 27 27); }
.dark .th-mon-pill.ok { background: rgb(22 163 74 / 0.18); color: rgb(134 239 172); }
.dark .th-mon-pill.warn { background: rgb(217 119 6 / 0.18); color: rgb(252 211 77); }
.dark .th-mon-pill.fail { background: rgb(220 38 38 / 0.18); color: rgb(252 165 165); }

.th-mon-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin-top: 0.625rem; font-size: 0.75rem; color: var(--th-muted); }
.th-mon-run { font-size: 0.75rem; font-weight: 500; padding: 0.15rem 0.55rem; border: 1px solid var(--th-control); border-radius: 0.375rem; color: var(--th-fg); background: transparent; }
.th-mon-run:hover { background: var(--th-muted-bg); }
.th-mon-run:disabled { opacity: 0.6; cursor: wait; }

.th-mon-history { display: flex; gap: 2px; margin-top: 0.75rem; height: 0.875rem; }
.th-mon-tick { flex: 1; max-width: 0.5rem; border-radius: 2px; background: var(--th-control); }
.th-mon-tick.ok { background: rgb(22 163 74 / 0.55); }
.th-mon-tick.warn { background: rgb(217 119 6 / 0.7); }
.th-mon-tick.fail { background: rgb(220 38 38 / 0.8); }

.th-mon-checks { list-style: none; margin: 0.875rem 0 0; padding: 0; font-size: 0.8125rem; }
.th-mon-checks li { display: grid; grid-template-columns: 0.5rem 9.5rem 1fr; gap: 0.625rem; align-items: baseline; padding: 0.4rem 0; border-top: 1px solid var(--th-border-soft); }
.th-mon-checks li.is-skip { color: var(--th-muted); }
.th-mon-check-label { font-weight: 500; }
.th-mon-check-msg { min-width: 0; overflow-wrap: anywhere; }
.th-mon-checks li.is-ok .th-mon-check-msg, .th-mon-checks li.is-skip .th-mon-check-msg { color: var(--th-muted); }
@media (max-width: 640px) {
    .th-mon-checks li { grid-template-columns: 0.5rem 1fr; }
    .th-mon-check-msg { grid-column: 2; }
}

.th-mon-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--th-control-strong); }
.th-mon-dot.ok { background: rgb(22 163 74); }
.th-mon-dot.warn { background: rgb(217 119 6); }
.th-mon-dot.fail { background: rgb(220 38 38); }
.th-mon-dot.running { background: rgb(37 99 235); box-shadow: 0 0 0 3px rgb(37 99 235 / 0.18); }
.th-mon-off { margin-top: 0.625rem; }
.th-dash-channel-name .th-mon-dot { margin-inline-start: 0.4rem; vertical-align: 1px; }

/* ---- Zadania w tle: wskaźnik w nagłówku + strona Zadania ------------------------ */

.th-act { position: relative; margin-inline-end: 0.75rem; }
.th-act-pill { display: inline-flex; align-items: center; gap: 0.45rem; height: 2rem; padding: 0 0.75rem; border-radius: 999px; border: 1px solid var(--th-border); background: var(--th-surface); font-size: 0.78rem; font-weight: 500; color: var(--th-muted); white-space: nowrap; }
.th-act-pill:hover { background: var(--th-muted-bg); }
.th-act-pill.is-busy { color: var(--th-fg); border-color: color-mix(in oklab, var(--primary-600) 35%, var(--th-border)); }
.th-act-pill.is-warn { color: rgb(146 64 14); }
.th-act-pill.is-bad { color: rgb(153 27 27); border-color: rgb(220 38 38 / 0.45); background: rgb(254 226 226 / 0.6); }
.dark .th-act-pill.is-warn { color: rgb(252 211 77); }
.dark .th-act-pill.is-bad { color: rgb(252 165 165); background: rgb(220 38 38 / 0.15); }

.th-act-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--th-control-strong); flex: none; }
.th-act-dot.ok { background: rgb(22 163 74); }
.th-act-dot.warn { background: rgb(217 119 6); }
.th-act-dot.bad { background: rgb(220 38 38); }
.th-act-dot.busy { background: var(--primary-600); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-600) 20%, transparent); }

.th-act-spin { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 999px; border: 2px solid color-mix(in oklab, var(--primary-600) 25%, transparent); border-top-color: var(--primary-600); animation: th-spin 0.8s linear infinite; flex: none; }
.dark .th-act-spin { border-color: rgb(255 255 255 / 0.15); border-top-color: var(--primary-300); }
@keyframes th-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .th-act-spin { animation: none; } }

.th-act-panel { position: fixed; right: 1rem; top: 3.75rem; z-index: 50; width: min(22rem, calc(100vw - 2rem)); max-height: 70vh; overflow: auto; padding: 0.5rem; border-radius: 0.75rem; border: 1px solid var(--th-border); background: var(--th-surface); box-shadow: 0 12px 32px rgb(0 0 0 / 0.12); }
[x-cloak] { display: none !important; }
.th-act-alert { margin: 0.25rem 0.25rem 0.5rem; padding: 0.6rem 0.7rem; border-radius: 0.5rem; background: rgb(254 226 226 / 0.7); color: rgb(127 29 29); font-size: 0.78rem; line-height: 1.45; }
.dark .th-act-alert { background: rgb(220 38 38 / 0.15); color: rgb(254 202 202); }
.th-act-batch { display: block; padding: 0.55rem 0.6rem; border-radius: 0.5rem; color: inherit; }
.th-act-batch:hover, .th-act-done:hover { background: var(--th-muted-bg); }
.th-act-batch-head { display: flex; justify-content: space-between; align-items: baseline; }
.th-act-kind { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--th-muted); }
.th-act-count { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--th-muted); }
.th-act-label { font-size: 0.8125rem; font-weight: 500; color: var(--th-fg); margin: 0.1rem 0 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-act-bar { display: block; height: 0.35rem; border-radius: 999px; background: var(--th-muted-bg); overflow: hidden; }
.th-act-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--primary-600); transition: width 0.4s ease; }
.dark .th-act-bar > span { background: var(--primary-400); }
.th-act-bar.is-lg { height: 0.5rem; margin-bottom: 0.75rem; }
.th-act-sub { margin-top: 0.3rem; font-size: 0.72rem; color: var(--th-muted); }
.th-act-empty { padding: 0.6rem; font-size: 0.8rem; color: var(--th-muted); }
.th-act-sep { margin: 0.5rem 0.6rem 0.2rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--th-muted); }
.th-act-done { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 0.5rem; font-size: 0.78rem; color: var(--th-fg); }
.th-act-done-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-act-when { font-size: 0.72rem; color: var(--th-muted); white-space: nowrap; }
.th-act-all { display: block; margin-top: 0.35rem; padding: 0.5rem 0.6rem; border-top: 1px solid var(--th-border-soft); font-size: 0.78rem; font-weight: 500; color: var(--primary-700); }
.dark .th-act-all { color: var(--primary-300); }
@media (max-width: 640px) { .th-act-pill { padding: 0 0.55rem; } .th-act { margin-inline-end: 0.35rem; } }

.th-tasks { display: flex; flex-direction: column; gap: 1.25rem; }
.th-tasks-health { padding: 0.85rem 1rem; border-radius: 0.75rem; border: 1px solid var(--th-border); background: var(--th-surface); }
.th-tasks-health.is-stalled { border-color: rgb(220 38 38 / 0.45); }
.th-tasks-health-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: 0.875rem; }
.th-tasks-help { margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.5; color: var(--th-muted); }
.th-tasks-batch { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 8rem 4.5rem; grid-template-areas: "kind label bar count" "kind when bar count"; align-items: center; gap: 0.1rem 0.75rem; width: 100%; padding: 0.6rem 0.5rem; border-top: 1px solid var(--th-border-soft); text-align: start; border-radius: 0.375rem; }
.th-tasks-batch:first-child { border-top: 0; }
.th-tasks-batch:hover { background: var(--th-muted-bg); }
.th-tasks-batch .th-act-kind { grid-area: kind; }
.th-tasks-batch-label { grid-area: label; font-size: 0.8125rem; font-weight: 500; color: var(--th-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-tasks-batch-when { grid-area: when; }
.th-tasks-batch-bar { grid-area: bar; }
.th-tasks-batch-count { grid-area: count; text-align: end; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--th-muted); }
.th-tasks-bad { color: rgb(185 28 28); font-weight: 600; }
.dark .th-tasks-bad { color: rgb(252 165 165); }
@media (max-width: 640px) {
    .th-tasks-batch { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kind count" "label label" "bar bar" "when when"; }
}
.th-tasks-status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--th-muted-bg); color: var(--th-muted); white-space: nowrap; }
.th-tasks-status.is-done { background: rgb(220 252 231); color: rgb(22 101 52); }
.th-tasks-status.is-failed { background: rgb(254 226 226); color: rgb(153 27 27); }
.th-tasks-status.is-running { background: color-mix(in oklab, var(--primary-600) 12%, transparent); color: var(--primary-700); }
.dark .th-tasks-status.is-done { background: rgb(22 163 74 / 0.18); color: rgb(134 239 172); }
.dark .th-tasks-status.is-failed { background: rgb(220 38 38 / 0.18); color: rgb(252 165 165); }
.dark .th-tasks-status.is-running { color: var(--primary-300); }
.th-tasks-detail { max-width: 28rem; font-size: 0.78rem; color: var(--th-muted); overflow-wrap: anywhere; }
.th-prod-activity { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.th-prod-activity.has-items { margin-bottom: 0.6rem; }
.th-prod-activity a { text-decoration: none; }
.th-act-short { display: none; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .th-act-text { display: none; }
    .th-act-short { display: inline; }
    .th-act-panel { left: 0.75rem; right: 0.75rem; width: auto; }
}

/* In-page confirmation (x-th-confirm) – replaces native confirm(), which embedded browsers block */
.th-confirm { position: relative; display: inline-flex; }
.th-confirm-box {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    width: max-content; max-width: 300px; display: flex; flex-direction: column; gap: 0.55rem;
    padding: 0.65rem 0.75rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); font-size: 0.8rem; font-weight: 400; line-height: 1.35;
    color: #111827; white-space: normal; text-align: left;
}
.dark .th-confirm-box { background: #18181b; border-color: #3f3f46; color: #e4e4e7; }
.th-confirm-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.th-confirm-actions button { font-size: 0.8rem; border-radius: 6px; padding: 0.3rem 0.75rem; cursor: pointer; border: 1px solid #d1d5db; background: #fff; color: #374151; }
.th-confirm-actions .th-confirm-yes { background: #2E5B45; border-color: #2E5B45; color: #fff; }
.dark .th-confirm-actions .th-confirm-no { background: #27272a; border-color: #52525b; color: #e4e4e7; }

/* Dry-run batch report on /admin/zadania */
.th-dry { margin: 0.75rem 0 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.th-dry-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.th-dry-chip { font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid #e5e7eb; background: #f9fafb; }
.th-dry-chip.is-ready { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.th-dry-chip.is-review { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.th-dry-chip.is-blocked { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.dark .th-dry-chip { background: #27272a; border-color: #3f3f46; color: #e4e4e7; }
.th-dry-group { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.82rem; }
.th-dry-group.is-review { border-color: #fde68a; }
.th-dry-group.is-blocked { border-color: #fecaca; }
.dark .th-dry-group { border-color: #3f3f46; }
.th-dry-group summary { cursor: pointer; font-weight: 600; }
.th-dry-group summary .th-mon-hint { font-weight: 400; }
.th-dry-group ul { margin: 0.5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.th-dry-group li { line-height: 1.4; }
.th-mon-run.is-primary { background: #2E5B45; border-color: #2E5B45; color: #fff; }