/* CodeHard backoffice — layout primitives for the MudBlazor pages.
   Everything here reads MudBlazor's theme variables, so light and dark follow the same rules
   and no page has to hardcode a colour again. */

:root {
    --ch-gap: 16px;
    --ch-radius: 8px;
    --ch-page-max: 1600px;
}

/* ── Page header ───────────────────────────────────────────────── */
.ch-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ch-gap);
    flex-wrap: wrap;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
    margin-bottom: var(--ch-gap);
}

.ch-page-header__text {
    min-width: 240px;
}

.ch-page-header__sub {
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.ch-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Filter bar ────────────────────────────────────────────────── */
.ch-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ch-gap);
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: var(--ch-gap);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--ch-radius);
    background: var(--mud-palette-background-grey);
}

.ch-filter-bar__hint {
    display: block;
    margin: -8px 0 var(--ch-gap) 4px;
    color: var(--mud-palette-text-secondary);
}

/* ── Stat tiles ────────────────────────────────────────────────── */
.ch-stat {
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--ch-radius);
    background: var(--mud-palette-surface);
    min-width: 168px;
    flex: 1 1 168px;
}

/* The brand red is reserved for the number that needs chasing. */
.ch-stat--emphasis {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

.ch-stat__label {
    display: block;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ch-stat__value {
    display: block;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ch-stat__sub {
    display: block;
    color: var(--mud-palette-text-secondary);
}

/* ── Data card ─────────────────────────────────────────────────── */
.ch-data-card {
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--ch-radius);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.ch-data-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ch-gap);
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ch-data-card__body {
    min-width: 0;
}

.ch-data-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ch-gap);
    flex-wrap: wrap;
    padding: 8px 16px;
    border-top: 1px solid var(--mud-palette-divider);
}

/* ── Empty state ──────────────────────────────────────────────── */
.ch-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.ch-empty__sub {
    max-width: 420px;
}

.ch-empty__action {
    margin-top: 8px;
}

/* ── Utilities that replace the copy-pasted inline styles ─────── */
.ch-mono {
    font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
}

.ch-hint {
    color: var(--mud-palette-text-secondary);
}

.ch-nowrap {
    white-space: nowrap;
}

.ch-num {
    font-variant-numeric: tabular-nums;
}

.ch-page {
    max-width: var(--ch-page-max);
    margin: 0 auto;
    padding: 24px;
}

@media (max-width: 768px) {
    .ch-page {
        padding: 16px;
    }
}


/* ── Shell ─────────────────────────────────────────────────────── */
.ch-appbar {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ch-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
}

/* The only place the brand red carries a filled block: everything else earns attention
   through position and type, not colour. */
.ch-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.ch-brand__text {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.01em;
}

.ch-drawer {
    border-right: 1px solid var(--mud-palette-divider);
}

.ch-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ch-nav__search {
    padding: 12px 12px 4px;
}

.ch-nav__menu {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 12px;
}

/* Section headings are signposts, not links — quiet, small, and out of the tab order. */
.ch-nav__section {
    padding: 14px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* text-disabled is 2.52:1 on the drawer — legal for a greyed-out control, unreadable for a
       label people are meant to read. text-secondary keeps it quiet and still passes AA. */
    color: var(--mud-palette-text-secondary);
}

.ch-nav__empty {
    padding: 16px;
    color: var(--mud-palette-text-secondary);
}

.ch-drawer__foot {
    padding: 10px 16px;
    border-top: 1px solid var(--mud-palette-divider);
}

.ch-main {
    background: var(--mud-palette-background-grey);
    min-height: 100vh;
}

/* ---------------------------------------------------------------------------
   Accessibility floor — applies to every page, so no page has to remember it.
   --------------------------------------------------------------------------- */

/* Keyboard users get the same "where am I" that a mouse gets from hover.
   :focus-visible (not :focus) means clicking a button doesn't leave a ring behind. */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Fluent and Mud both ship their own focus treatment on some controls; where they do,
   theirs wins on the inner element and ours stays on the host. Nothing here removes a ring. */

/* Coarse pointers (finger, stylus) need a bigger target than the 30px an icon button draws.
   Grow the hit area with padding, not size, so the icon itself doesn't jump. */
@media (pointer: coarse) {
    .mud-button-root.mud-icon-button,
    .fluent-button[appearance="stealth"],
    .mud-nav-link {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Motion is decoration here — nothing in this app conveys meaning through movement,
   so honouring the OS setting costs nothing and stops the vestibular headaches. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* A row that has blown its due date. Colour alone would fail for the ~8% who cannot see it,
   so the same rows also say "เกิน N วัน" in the due column — this is the second signal, not the only one. */
.ch-row-late td {
    background: var(--mud-palette-error-hover);
}

/* ── Location tree ─────────────────────────────────────────────── */
.ch-tree {
    padding: 8px 4px;
}

/* The guide line only appears below the root, so top-level buildings stay flush left. */
.ch-tree__node {
    margin-left: calc(var(--ch-tree-depth, 0) * 20px);
    border-left: 1px solid var(--mud-palette-divider);
    padding-left: 10px;
}

.ch-tree__node[style*="--ch-tree-depth: 0"] {
    border-left: none;
    padding-left: 0;
}

.ch-tree__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
}

.ch-tree__row:hover {
    background: var(--mud-palette-action-default-hover);
}

.ch-tree__spacer {
    width: 30px;
    flex: 0 0 30px;
}

.ch-tree__text {
    min-width: 0;
}

/* Labels come out on white paper, so the preview does not follow dark mode — what you see
   has to be what the printer produces. */
.ch-label-preview {
    background: #fff;
    color: #000;
    padding: 12px;
    margin: 12px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    overflow-x: auto;
}

/* The page title is an h1 for the router and for screen readers; the browser's default h1
   margins would break the header row, so they go. */
.ch-page-header__title {
    margin: 0;
}

/* A row the system will skip — dimmed, but still legible enough to check. */
.ch-row-muted td {
    color: var(--mud-palette-text-secondary);
}

/* Units sit visually inside their product group: shaded, indented, and tied together by a
   rule down the left edge of the first data cell. */
.ch-unit-row td {
    background: var(--mud-palette-background-grey);
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ch-unit-row td:nth-child(2) {
    border-left: 2px solid var(--mud-palette-primary);
    padding-left: 16px;
}

/* ── Detail rows ───────────────────────────────────────────────── */
.ch-detail-row {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: 12px;
    padding: 5px 0;
    align-items: baseline;
}

.ch-detail-row__label {
    color: var(--mud-palette-text-secondary);
}

.ch-detail-row__value {
    min-width: 0;
    word-break: break-word;
}

@media (max-width: 560px) {
    .ch-detail-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ── QR scanner ────────────────────────────────────────────────── */
.ch-scanner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
}

.ch-scanner__stage {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: var(--ch-radius);
    overflow: hidden;
}

/* The video feeds the canvas that the decoder reads; only the canvas is shown. */
.ch-scanner__video {
    display: none;
}

.ch-scanner__canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ch-scanner__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Aim box: white on the darkened feed, not a theme colour — it sits over live video, not the page. */
.ch-scanner__frame {
    width: 200px;
    height: 200px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

/* A history panel should not push the rest of the page off screen. */
.ch-scroll-list {
    max-height: 400px;
    overflow-y: auto;
}

/* ── Drop zone ─────────────────────────────────────────────────── */
.ch-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 120px of padding, as this had, is a landing strip; 32px is a target. */
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    border: 2px dashed var(--mud-palette-divider);
    border-radius: var(--ch-radius);
    background: var(--mud-palette-background-grey);
    transition: border-color 0.15s, background 0.15s;
}

.ch-dropzone:hover {
    border-color: var(--mud-palette-primary);
}

/* A QR preview stands for a printed sticker, so it keeps a white plate in dark mode. */
.ch-qr-plate {
    padding: 16px;
    background: #fff;
    border-radius: var(--ch-radius);
    border: 1px solid var(--mud-palette-divider);
    line-height: 0;
}

.ch-break {
    word-break: break-all;
}

/* Free text the user typed keeps the line breaks they typed. */
.ch-prewrap {
    white-space: pre-wrap;
}

/* ── Attendance calendar ───────────────────────────────────────── */
.ch-cal {
    padding: 16px;
}

.ch-cal__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ch-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.ch-cal__head {
    padding: 6px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.ch-cal__head.is-weekend {
    color: var(--mud-palette-primary);
}

.ch-cal__cell {
    min-height: 78px;
    padding: 4px 5px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    /* The state stripe sits on the left edge, so cells stay legible at small sizes. */
    border-left-width: 3px;
    border-left-color: transparent;
}

.ch-cal__cell.is-empty {
    border-color: transparent;
    background: none;
}

.ch-cal__cell.is-weekend {
    background: var(--mud-palette-background-grey);
}

.ch-cal__cell.is-future {
    opacity: 0.55;
}

.ch-cal__cell.is-today {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
}

.ch-cal__cell.is-complete {
    border-left-color: var(--mud-palette-success);
}

.ch-cal__cell.is-working {
    border-left-color: var(--mud-palette-warning);
}

.ch-cal__cell.is-edited {
    border-left-color: var(--mud-palette-info);
}

.ch-cal__day {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ch-cal__times {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}

.ch-cal__time {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.ch-cal__time-tag {
    color: var(--mud-palette-text-secondary);
}

.ch-cal__time.is-in span:last-child {
    color: var(--mud-palette-success-darken);
}

.ch-cal__time.is-out span:last-child {
    color: var(--mud-palette-primary);
}

.ch-cal__hours {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.ch-cal__absent {
    margin-top: 8px;
    text-align: center;
    color: var(--mud-palette-text-disabled);
}

.ch-cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-divider);
}

.ch-cal__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* A month of 78px cells does not fit a phone; drop the per-day times and keep the stripe. */
@media (max-width: 640px) {
    .ch-cal__cell {
        min-height: 52px;
    }

    .ch-cal__times,
    .ch-cal__absent {
        display: none;
    }
}

/* ── Rich text editor ──────────────────────────────────────────── */
.ch-rte {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--ch-radius);
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.ch-rte:focus-within {
    border-color: var(--mud-palette-primary);
}

.ch-rte__toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ch-rte__content {
    min-height: 120px;
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    line-height: 1.6;
}

/* The editing surface is the control here — tabbing into it has to look like something.
   Inset so the ring hugs the editor's own border instead of spilling outside it. */
.ch-rte__content:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.ch-rte__content.empty::before {
    content: attr(data-placeholder);
    color: var(--mud-palette-text-disabled);
    pointer-events: none;
    position: absolute;
}

.ch-rte__content p {
    margin: 0 0 0.5em;
}

.ch-rte__content ul,
.ch-rte__content ol {
    margin: 0 0 0.5em 1.5em;
    padding: 0;
}

.ch-rte__content li {
    margin: 0.25em 0;
}

/* One attached file in a list: name takes the slack, size and remove stay put. */
.ch-file-row {
    padding: 4px 8px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
}

.ch-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Kanban ────────────────────────────────────────────────────── */
.ch-kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding: 4px;
    align-items: start;
}

.ch-kanban__col {
    display: flex;
    flex-direction: column;
    min-height: 200px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--ch-radius);
    background: var(--mud-palette-background-grey);
}

.ch-kanban__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ch-kanban__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    flex: 1;
    min-height: 120px;
}

/* Where a dragged card would land. */
.ch-kanban__body.mud-drop-zone-drag-block-target {
    background: var(--mud-palette-action-default-hover);
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -4px;
}

.ch-kanban__empty {
    padding: 20px 8px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* ── Task card ─────────────────────────────────────────────────── */
.ch-task-card {
    position: relative;
    border: 1px solid var(--mud-palette-divider);
    /* Difficulty rides the left edge so the cards stay scannable down a column. */
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
}

.ch-task-card.is-easy {
    border-left-color: var(--mud-palette-success);
}

.ch-task-card.is-medium {
    border-left-color: var(--mud-palette-warning);
}

.ch-task-card.is-hard {
    border-left-color: var(--mud-palette-error);
}

.ch-task-card__open {
    display: block;
    width: 100%;
    padding: 10px 34px 10px 10px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.ch-task-card__menu {
    position: absolute;
    top: 4px;
    right: 4px;
}

.ch-task-card__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.ch-task-card__title {
    font-weight: 600;
    line-height: 1.35;
}

.ch-task-card__hours {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
}

.ch-task-card__project {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.ch-task-card__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.ch-task-card__skill {
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.ch-task-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
}

.ch-task-card__levels {
    display: inline-flex;
    gap: 4px;
}

/* ── Leave balance ─────────────────────────────────────────────── */
.ch-balance {
    flex: 1 1 220px;
    min-width: 210px;
    max-width: 300px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--ch-radius);
    background: var(--mud-palette-surface);
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    transition: border-color 0.15s;
}

.ch-balance:hover {
    border-color: var(--mud-palette-primary);
}

.ch-balance__head {
    margin-bottom: 6px;
}

.ch-balance__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ch-balance__days {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary);
}

.ch-balance__rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.ch-balance__rows > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* ── Leave approval card ───────────────────────────────────────── */
.ch-approval {
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-divider);
    /* Age rides the left edge — requests escalate to HR at 48 hours. */
    border-left-width: 3px;
    border-left-color: transparent;
    border-radius: var(--ch-radius);
    background: var(--mud-palette-surface);
}

.ch-approval.is-ageing {
    border-left-color: var(--mud-palette-warning);
}

.ch-approval.is-overdue {
    border-left-color: var(--mud-palette-error);
}

/* One person's leave on one day in the team calendar. */
.ch-leave-chip {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-grey);
    font-size: 10px;
    line-height: 1.4;
    width: 100%;
    color: inherit;
    font-family: inherit;
}

.ch-leave-chip.is-approved {
    border-color: var(--mud-palette-success);
}

.ch-leave-chip.is-pending {
    border-color: var(--mud-palette-warning);
    border-style: dashed;
}

.ch-leave-chip.is-openable {
    cursor: pointer;
    border-color: var(--mud-palette-info);
}

.ch-leave-chip__code {
    font-weight: 600;
}

/* ── Expense item row ──────────────────────────────────────────── */
.ch-expense-item {
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--mud-palette-divider);
    /* A policy breach rides the left edge so a long claim can be scanned for them. */
    border-left-width: 3px;
    border-left-color: transparent;
    border-radius: var(--ch-radius);
    background: var(--mud-palette-surface);
}

.ch-expense-item.is-violation {
    border-left-color: var(--mud-palette-error);
}

/* ── Claim timeline ────────────────────────────────────────────── */
.ch-timeline {
    padding: 0;
}

.ch-timeline__detail {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: var(--ch-radius);
    background: var(--mud-palette-background-grey);
    /* Audit comments are free text and can arrive with the author's own line breaks. */
    white-space: pre-wrap;
}

/* ── Claim progress strip ──────────────────────────────────────── */
.ch-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ch-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 96px;
    min-width: 96px;
    padding: 10px 8px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--ch-radius);
    background: var(--mud-palette-surface);
    text-align: center;
}

.ch-progress__step.is-done {
    border-color: var(--mud-palette-success);
    background: var(--mud-palette-success-hover);
}

.ch-progress__step.is-failed {
    border-color: var(--mud-palette-error);
    background: var(--mud-palette-error-hover);
}

.ch-progress__step.is-pending {
    /* Steps that have not happened stay quiet rather than competing with the ones that have. */
    opacity: 0.6;
}

/* ── Chart cards ───────────────────────────────────────────────── */
.ch-chart-card {
    /* Two charts side by side stay the same height even when one has fewer rows. */
    height: 100%;
}

.ch-rank-row {
    padding: 6px 0;
}

.ch-rank-row + .ch-rank-row {
    border-top: 1px solid var(--mud-palette-divider);
}

/* ── Monthly bar chart ─────────────────────────────────────────── */
.ch-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 220px;
    padding: 16px 0 0;
    overflow-x: auto;
}

.ch-bars__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 48px;
    min-width: 48px;
    height: 100%;
}

/* The bar's percentage height resolves against this, so a full-height bar cannot push the
   month label out of the chart. */
.ch-bars__track {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
}

.ch-bars__bar {
    width: 36px;
    min-height: 4px;
    border-radius: var(--ch-radius) var(--ch-radius) 0 0;
    background: var(--mud-palette-primary);
    transition: background 150ms ease;
}

.ch-bars__col:hover .ch-bars__bar {
    background: var(--mud-palette-primary-darken);
}

.ch-bars__label {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* A category that has been switched off still shows, but recedes. */
.ch-data-card.is-inactive {
    border-style: dashed;
    opacity: 0.72;
}

/* ── Horizontal ranked bars ────────────────────────────────────── */
/* ใช้เมื่อคำถามคือ "ใครมาก ใครน้อย" — ตัวเลขเรียงกันเป็นตารางตอบคำถามนี้ได้ช้ากว่า */
.ch-hbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ch-hbar__row {
    display: grid;
    grid-template-columns: minmax(88px, 32%) 1fr auto;
    gap: 12px;
    align-items: center;
}

.ch-hbar__label {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-hbar__track {
    height: 10px;
    border-radius: 999px;
    background: var(--mud-palette-divider);
    overflow: hidden;
}

.ch-hbar__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--mud-palette-primary);
}

.ch-hbar__fill--success { background: var(--mud-palette-success); }
.ch-hbar__fill--warning { background: var(--mud-palette-warning); }
.ch-hbar__fill--error   { background: var(--mud-palette-error); }

.ch-hbar__value {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ── Themed summary block ──────────────────────────────────────── */
/* หัวเรื่องละหนึ่งข้อสรุป ไม่ใช่ตัวเลขดิบกองรวมกัน */
.ch-theme__verdict {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ch-radius);
    background: var(--mud-palette-background-grey);
    margin-bottom: 16px;
}

.ch-theme__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

/* ตัวเลขเดียวกันในรูปแบบที่โปรแกรมอ่านหน้าจออ่านได้ ไม่ให้เห็นด้วยตา */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}