/* CETA app stylesheet (CS-0058). Every app looks the same: Tabler's own design, loaded
   from tabler.min.css. This file holds only what our pages need that Tabler has no class
   for, expressed in Tabler's variables — no colours, fonts, sizes or spacing of our own. */

/* Short aliases onto Tabler's tokens, used by the module CSS and the rules below. */
:root {
    --bg: var(--tblr-bg-surface-secondary);
    --surface: var(--tblr-bg-surface);
    --fg: var(--tblr-body-color);
    --muted: var(--tblr-secondary);
    --rule: var(--tblr-border-color);
    --accent: var(--tblr-primary);
    --prose: var(--tblr-body-color);
    --radius: var(--tblr-border-radius);
    --nav-h: 3.5rem;
    --max: 80rem;   /* reading width of the content blocks (theme.max_width) */
}
.muted { color: var(--tblr-secondary) !important; }
.is-hidden { display: none !important; }

/* Chrome */
.app-brand { color: inherit; text-decoration: none; }
.app-nav-system { border-top: var(--tblr-border-width) solid var(--tblr-border-color); }
.app-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Lists: the filter bar is inline from md up and an offcanvas on phones. */
@media (min-width: 768px) {
    .app-filter-panel .offcanvas-body { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0; }
    .app-filter-panel .app-checklist > .form-select { width: auto; }   /* only as wide as the label */
    .app-filter-search { flex: 0 1 16rem; }
    /* The panel wraps inside the toolbar instead of pushing it wider than its card (CS-0069). */
    .app-filter-panel { flex: 0 1 auto; min-width: 0; max-width: 100%; }
}
.app-filters { min-width: 0; }
.board-tools .btn-group { flex: none; }
.board-legend .badge-legend { font-size: var(--tblr-font-size-h5); }
/* Phone: Filters and the search share the first line, the chips wrap under them. */
@media (max-width: 767.98px) { .app-filter-search { flex: 1 1 10rem; } .app-filter-summary { order: 1; flex-basis: 100%; } }
.app-filter-apply { display: flex; gap: 0.25rem; align-items: center; }
/* The search icon sits inside the small search box (Tabler sizes the addon for a regular input). */
.app-filter-search .input-icon-addon { --tblr-input-icon-addon-width: 2rem; height: 100%; font-size: 1em; }
.app-filter-search .form-control { padding-inline-start: 2rem; }
/* Table headings semibold, as on the demo's table cards (Tabler sets the size and capitals). */
.app-table > thead th { font-weight: var(--tblr-font-weight-semibold); }
@media (max-width: 767.98px) {
    .app-filter-panel .offcanvas-body { display: flex; flex-direction: column; gap: 0.75rem; }
    .app-filter-panel .app-checklist > .form-select { width: 100%; }
}
.app-checklist .dropdown-menu { max-height: 18rem; overflow-y: auto; }
.app-check { cursor: pointer; }
.app-chip { text-decoration: none; }
.app-table .col-pick { width: 1%; }
.app-table .col-actions { width: 1%; text-align: end; }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }

/* Detail pages: the tab strip scrolls sideways on a narrow screen. */
.app-tab-strip { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.app-tab-strip .nav-link { white-space: nowrap; }
.detail-photo { display: block; width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: var(--tblr-border-radius); cursor: zoom-in; }

/* In-app document preview (partials/preview.php) */
.doc-preview-body { display: flex; justify-content: center; align-items: center; min-height: 40vh; }
.doc-preview-img { max-width: 100%; max-height: 78vh; }
.doc-preview-frame { width: 100%; height: 78vh; border: 0; display: block; }
a[data-preview] { cursor: zoom-in; }
.table-thumb { height: 3rem; width: auto; max-width: 9rem; object-fit: cover; border-radius: var(--tblr-border-radius); }

/* Dashboard: Chart.js (maintainAspectRatio: false) needs a parent of fixed height. */
.breakdown-chart { position: relative; height: 11rem; }
.activity-chart { position: relative; height: 14rem; }
.agent-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.activity-table .act-lane, .activity-table .act-long { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.activity-table tr.act-link { cursor: pointer; }
.activity-table details.act-fold { display: inline; }
.activity-table details.act-fold > summary { display: inline; cursor: pointer; }
.task.done .task-title { text-decoration: line-through; }
.tile--success .tile-n { color: var(--tblr-success); }
.tile--warning .tile-n { color: var(--tblr-warning); }
.tile--danger .tile-n { color: var(--tblr-danger); }
.tile--brand .tile-n { color: var(--tblr-primary); }

/* Help: the contents card stays in view beside the guide. */
@media (min-width: 992px) { .help-toc { position: sticky; top: 1rem; } }
.task-main { flex: 1; min-width: 0; }
.task-pri { margin-inline-start: auto; }
.progress-rows { display: flex; flex-direction: column; gap: 0.75rem; }
.progress-head, .progress-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: baseline; }
.progress-status, .progress-pct { margin-inline-start: auto; }
.progress-meta, .progress-group { color: var(--tblr-secondary); }

/* Tabler's .page sets contain: layout (for its boxed layout), which would anchor the filter
   offcanvas to the page instead of the viewport. */
.page { contain: none; }
/* Absolutely-positioned bits (visually-hidden labels) must stay inside the table scroller. */
.table-responsive { position: relative; }
/* Live activity: a running run stands out, a folded lane's header row is tinted, its members share it. */
.activity-table tr.running td { font-weight: var(--tblr-font-weight-medium); }
.activity-table tr.act-group td { background: var(--tblr-bg-surface-tertiary); }
.activity-table tr.act-member td.act-lane { border-top-color: transparent; }

/* Tables: sortable headers read as headings; badge and last columns right-align. */
th a.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.15em; }
th a.sort-link:hover { color: var(--tblr-primary); }
th.col-badge, td.col-badge, th.col-right, td.col-right { text-align: end; }
.related-total td { font-weight: var(--tblr-font-weight-bold); border-top: 2px solid var(--tblr-border-color); }
.img-field-preview { display: block; width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: var(--tblr-border-radius); margin: 0.35rem 0; border: var(--tblr-border-width) solid var(--tblr-border-color); }
.file-field-link { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Board (CS-0069): a Tabler card per column, equal widths, scrolling sideways with a snap
   per column; each column's body scrolls under its header; cards are `card card-sm`. */
.app-view-body:has(> .kanban) { padding: 0; }
.kanban { display: flex; gap: 0.75rem; overflow-x: auto; padding: 1rem; align-items: flex-start;
    scroll-snap-type: x proximity; scroll-padding-inline: 1rem; background: var(--tblr-bg-surface-secondary);
    border-end-start-radius: inherit; border-end-end-radius: inherit; }
.kanban-col { flex: 1 0 14rem; min-width: 14rem; max-width: 22rem; max-height: max(24rem, calc(100vh - 15rem)); margin: 0; scroll-snap-align: start; transition: box-shadow 0.15s, background-color 0.15s; }
.kanban-head { flex: none; position: sticky; top: 0; z-index: 1; gap: 0.5rem; padding: 0.625rem 0.75rem; min-height: 0; background: inherit; border-start-start-radius: inherit; border-start-end-radius: inherit; }
.kanban-title { font-size: var(--tblr-font-size-h4, 0.875rem); font-weight: var(--tblr-font-weight-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-dot { flex: none; }
.kanban-cards { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; overflow-y: auto; }
.kanban-col.over { box-shadow: 0 0 0 2px var(--tblr-primary); background-color: color-mix(in srgb, var(--tblr-primary) 6%, var(--tblr-bg-surface)); }
.kanban-empty { display: flex; align-items: center; justify-content: center; min-height: 4rem; padding: 0.75rem; border: 1px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius); color: var(--tblr-secondary); font-size: var(--tblr-font-size-h5); }
.kanban-cards:has(.kanban-card) > .kanban-empty { display: none; }
.kanban-col.over .kanban-empty { border-color: var(--tblr-primary); color: var(--tblr-primary); }
.kanban-card { margin: 0; flex: none; transition: transform 0.15s, box-shadow 0.15s; }
.kanban-card > .card-body { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.625rem 0.75rem; }
.kanban-card:hover { transform: translateY(-1px); box-shadow: 0 0.25rem 0.75rem rgba(var(--tblr-body-color-rgb), 0.12); }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card[draggable="true"]:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.45; transform: none; }
.kanban-card a, .kanban-card button { cursor: pointer; }
.kc-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-weight: var(--tblr-font-weight-medium); line-height: 1.35; color: inherit; text-decoration: none; }
a.kc-title:hover { color: var(--tblr-primary); text-decoration: none; }
.kc-meta { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.kc-meta:empty { display: none; }
.kc-code { font-size: var(--tblr-font-size-h6, 0.6875rem); color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary); border: var(--tblr-border-width) solid var(--tblr-border-color); border-radius: var(--tblr-border-radius-sm); padding: 0 0.3rem; line-height: 1.4; white-space: nowrap; }
.kc-line { color: var(--tblr-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-foot { display: flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; color: var(--tblr-secondary); }
.kc-dot { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.kc-age { white-space: nowrap; }
.kc-menu .btn { --tblr-btn-padding-y: 0; --tblr-btn-padding-x: 0; width: 1.5rem; height: 1.5rem; min-height: 0; margin: -0.25rem -0.375rem -0.25rem 0; }
.kc-avatars .avatar { font-weight: var(--tblr-font-weight-medium); }
/* Phone: each column is most of the screen and snaps into place; cards full width. */
@media (max-width: 767.98px) {
    .kanban { scroll-snap-type: x mandatory; padding: 0.75rem; gap: 0.5rem; scroll-padding-inline: 0.75rem; }
    .kanban-col { flex: 0 0 calc(100% - 2.5rem); min-width: 0; max-width: none; max-height: calc(100dvh - 9rem); }
}
@media (prefers-reduced-motion: reduce) { .kanban-card, .kanban-col { transition: none; } .kanban-card:hover { transform: none; } }

/* Calendar: a month grid of day cells, records as event chips tinted by status. */
.cal-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; }
.cal-month { font-size: var(--tblr-font-size-h3); font-weight: var(--tblr-font-weight-bold); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--tblr-border-color); border: var(--tblr-border-width) solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); overflow: hidden; }
.cal-dow { background: var(--tblr-bg-surface-tertiary); padding: 0.5rem; text-align: center; font-size: var(--tblr-font-size-h5); color: var(--tblr-secondary); }
.cal-cell { background: var(--tblr-bg-surface); min-height: 7rem; padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cal-cell.cal-out { background: var(--tblr-bg-surface-secondary); }
.cal-cell.cal-out .cal-daynum { opacity: 0.45; }
.cal-cell.cal-today { box-shadow: inset 0 0 0 2px var(--tblr-primary); }
.cal-daynum { font-size: 0.8em; color: var(--tblr-secondary); text-align: end; }
.cal-today .cal-daynum { color: var(--tblr-primary); font-weight: var(--tblr-font-weight-bold); }
.cal-layers { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; margin: 0 0 0.75rem; }
.cal-event { --ev: var(--tblr-primary); display: block; font-size: 0.8em; padding: 0.2rem 0.4rem; border-radius: var(--tblr-border-radius-sm); background: color-mix(in srgb, var(--ev) 14%, var(--tblr-bg-surface)); border-inline-start: 3px solid var(--ev); color: var(--tblr-body-color); overflow: hidden; text-decoration: none; }
a.cal-event:hover { background: color-mix(in srgb, var(--ev) 26%, var(--tblr-bg-surface)); text-decoration: none; }
.cal-event.is-hidden { display: none; }
.cal-ev-success { --ev: var(--tblr-success); }
.cal-ev-warning { --ev: var(--tblr-warning); }
.cal-ev-danger { --ev: var(--tblr-danger); }
.cal-ev-neutral { --ev: var(--tblr-secondary); }
.cal-ev-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.3rem; }
.cal-ev-top .cal-ev-title { flex: 1 1 auto; min-width: 0; }
.cal-ev-time { flex: none; color: var(--tblr-secondary); white-space: nowrap; }
.cal-ev-title { display: block; font-weight: var(--tblr-font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-meta, .cal-ev-line { display: block; color: var(--tblr-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-legend-dot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; padding: 0; border: 0; background: var(--ev); margin-inline-end: 0.35em; }
.cal-legend-label { color: var(--tblr-secondary); font-size: var(--tblr-font-size-h5); }
.cal-legend .cal-layer-toggle { cursor: default; }
@media (max-width: 767.98px) { .cal-cell { min-height: 4.5rem; padding: 0.2rem; } .cal-event { font-size: 0.7em; } }

/* Week (gantt) and schedule grids: rows x days, scrolling sideways on a phone. */
.week-scroll { overflow-x: auto; background: var(--tblr-bg-surface); border: var(--tblr-border-width) solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); }
.week-grid { display: grid; grid-template-columns: minmax(7rem, 12rem) repeat(7, minmax(7rem, 1fr)); gap: 1px; background: var(--tblr-border-color); min-width: 52rem; }
.wk-corner, .wk-dayhead { background: var(--tblr-bg-surface-tertiary); padding: 0.5rem; font-size: var(--tblr-font-size-h5); color: var(--tblr-secondary); position: sticky; top: 0; }
.wk-dayhead { text-align: center; }
.wk-dow { font-weight: var(--tblr-font-weight-bold); }
.wk-dom { margin-inline-start: 0.3rem; }
.wk-dayhead.wk-today { color: var(--tblr-primary); }
.wk-rowlabel { background: var(--tblr-bg-surface); padding: 0.5rem; font-weight: var(--tblr-font-weight-medium); display: flex; align-items: center; min-width: 0; }
.wk-cell { background: var(--tblr-bg-surface); min-height: 2.6rem; padding: 0.3rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.wk-cell.wk-today { background: color-mix(in srgb, var(--tblr-primary) 6%, var(--tblr-bg-surface)); }
.wk-empty { grid-column: 1 / -1; background: var(--tblr-bg-surface); padding: 1.5rem; text-align: center; }
.sched-grid { min-width: 0; }
.sched-avatar { flex: none; }

/* `format: markdown` text (detail pages, related rows). */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre { margin: 0 0 0.6em; }
.md h3, .md h4, .md h5, .md h6 { margin: 0.9em 0 0.35em; font-size: 1em; }
.md ul, .md ol { padding-inline-start: 1.4em; }
.md blockquote { padding: 0.2em 0.9em; border-inline-start: 3px solid var(--tblr-border-color); color: var(--tblr-secondary); }
.md pre { padding: 0.7em 0.9em; overflow-x: auto; background: var(--tblr-bg-surface-tertiary); border-radius: var(--tblr-border-radius); }
.md table { margin: 0.3em 0 0.9em; }
.md th, .md td { padding: 0.3em 0.75em; border-bottom: var(--tblr-border-width) solid var(--tblr-border-color); text-align: start; vertical-align: top; }
.md th { color: var(--tblr-secondary); }
.md .md-right { text-align: end; font-variant-numeric: tabular-nums; }
.md .md-center { text-align: center; }

/* Content pages: in-page section tabs hide on phones (the anchors still work). */
.subnav { top: 0; z-index: 1010; }
@media (max-width: 575.98px) { .subnav { display: none; } }
.prose { max-width: var(--max); }
/* Content blocks (CS-0066): a readable measure for leads and body copy, a bigger headline
   from lg up (Tabler's display-6 is 2rem), the hero visual never wider than its column. */
.app-lead, .app-readable { max-width: 46rem; }
.app-readable > p:last-child { margin-bottom: 0; }
@media (min-width: 992px) { .app-hero-title { font-size: 2.75rem; } }
.app-hero-image { max-height: 16rem; width: auto; }
@media (max-width: 991.98px) { .app-hero-image { max-height: 8rem; max-width: min(100%, 18rem); } }
.app-step-num { flex-shrink: 0; }
/* The public layout: the content sections run edge to edge (no page-body gap); the
   navbar's logo and the footer's are the same modest height. */
.app-public-main { margin-block: 0; }
.app-public-nav .navbar-brand-image, .app-footer-logo { height: 2.25rem; width: auto; }
.app-public-nav .app-brand-name { font-weight: var(--tblr-font-weight-bold); }
.app-public-footer { margin-top: 0; }
/* A view's own controls (month nav, lanes, range) share one toolbar row under the card header. */
.app-view-tools > .cal-bar { flex: 1 1 auto; margin: 0; }
.app-view-tools > .cal-layers, .app-view-tools > .badge-legend { margin: 0; }