/* ============================================================================
   TENDER MANAGER — module stylesheet
   ============================================================================
   Ported from the departmental app's styles.css (Tender_Manager_Handover_
   2026-08-05). The brief was "the pages to be exact exact that in the proposed
   project", so the layout, density, colours and table grammar are reproduced
   rather than reinterpreted.

   WHAT CHANGED, AND WHY
   ---------------------
   * Every rule is scoped under .tm-page. The source owned the whole document;
     here it is one page inside MainLayoutMS, so unscoped element selectors
     (body, table, h1) would leak across the portal.
   * The source's #sidebar / #main / .toast / .banner rules are gone. The portal
     shell already provides navigation and chrome, and this module raises no
     toasts (BECAspire.Web/CLAUDE.md) — results are reported inline instead.
   * The palette is declared once on .tm-page and hangs off the portal's --BEC-*
     semantic tokens where an honest match exists, keeping the source hex as the
     fallback so the page still renders correctly if a token is renamed.

   NOT loaded globally: each Tender Manager page pulls it in through
   <HeadContent>, the same way css/modules/it-support-grid.css is used.
   ============================================================================ */

.tm-page {
    /* Source palette. --tm-navy is the app's spine: table headers, titles,
       primary buttons. It is the same navy family as --BEC-themePrimary. */
    --tm-navy: var(--BEC-themePrimary, #1b3a5c);
    --tm-navy-dark: #12283f;
    --tm-accent: #e8a33d;
    --tm-bg: #f4f6f9;
    --tm-card: var(--BEC-colorNeutralBackground1, #ffffff);
    --tm-border: #dde3ea;
    --tm-text: #22303e;
    --tm-muted: #6b7a89;
    --tm-green: #2e8b57;
    --tm-red: #c0392b;
    --tm-amber: #d68910;
    --tm-blue: #2471a3;

    color: var(--tm-text);
    font-size: 14px;
    padding-block: 4px;
    padding-inline: 2px;
}

/* ---------- Page heading ---------- */
.tm-page h1.tm-title { font-size: 20px; margin-block-end: 4px; color: var(--tm-navy); }
.tm-page .tm-sub { color: var(--tm-muted); font-size: 13px; margin-block-end: 18px; }

/* ---------- State blocks (loading / error / empty) ----------
   The source used a toast for failures. Per the portal design standard a page
   failure is shown inline with a retry, so these replace it. */
.tm-page .tm-state {
    display: flex; align-items: center; gap: 12px;
    background: var(--tm-card); border: 1px solid var(--tm-border);
    border-radius: 8px; padding: 18px 20px; margin-block-end: 18px; font-size: 13.5px;
}
.tm-page .tm-state.tm-error { border-color: #e6bcb6; background: #fdf1ef; color: #922b21; }
.tm-page .tm-state .material-symbols-outlined { font-size: 22px; }
.tm-page .tm-state .tm-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--tm-border); border-top-color: var(--tm-navy);
    animation: tm-spin .8s linear infinite; flex-shrink: 0;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .tm-page .tm-state .tm-spinner { animation-duration: 3s; }
}

/* An action's result, reported beside the action instead of in a toast. */
.tm-page .tm-notice {
    display: flex; align-items: center; gap: 8px;
    border-radius: 6px; padding: 8px 12px; margin-block-end: 12px; font-size: 12.5px;
}
.tm-page .tm-notice-ok { background: #eaf6ef; border: 1px solid #bfe0cd; color: #1e6b3a; }
.tm-page .tm-notice-err { background: #fdf1ef; border: 1px solid #e6bcb6; color: #922b21; }
.tm-page .tm-notice .material-symbols-outlined { font-size: 18px; }

/* ---------- KPI cards ---------- */
.tm-page .tm-kpi-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px; margin-block-end: 20px;
}
.tm-page .tm-kpi {
    background: var(--tm-card); border: 1px solid var(--tm-border);
    border-radius: 8px; padding: 14px 16px;
}
.tm-page .tm-kpi .tm-kpi-value { font-size: 26px; font-weight: 700; color: var(--tm-navy); }
.tm-page .tm-kpi .tm-kpi-label {
    font-size: 12px; color: var(--tm-muted); text-transform: uppercase;
    letter-spacing: .5px; margin-block-start: 2px;
}
.tm-page .tm-kpi.k-green .tm-kpi-value { color: var(--tm-green); }
.tm-page .tm-kpi.k-red   .tm-kpi-value { color: var(--tm-red); }
.tm-page .tm-kpi.k-amber .tm-kpi-value { color: var(--tm-amber); }
.tm-page .tm-kpi.k-blue  .tm-kpi-value { color: var(--tm-blue); }

/* ---------- Cards ---------- */
.tm-page .tm-card {
    background: var(--tm-card); border: 1px solid var(--tm-border);
    border-radius: 8px; padding: 16px; margin-block-end: 18px;
}
.tm-page .tm-card h3 {
    font-size: 14px; color: var(--tm-navy); margin-block-end: 12px;
    text-transform: uppercase; letter-spacing: .5px;
}
.tm-page .tm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1100px) { .tm-page .tm-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Horizontal bars ----------
   Marked up as a <dl> so each bar is a label/value pair to a screen reader;
   the default dl/dt/dd margins are cleared so the row still lays out as the
   source's flex row. */
.tm-page .tm-bars { margin: 0; }
.tm-page .tm-bar-row dt, .tm-page .tm-bar-row dd { margin: 0; }
.tm-page .tm-bar-row { display: flex; align-items: center; gap: 8px; margin-block-end: 7px; font-size: 12.5px; }
.tm-page .tm-bar-label {
    width: 150px; text-align: end; color: var(--tm-muted); flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-page .tm-bar-track { flex: 1; background: #eef1f5; border-radius: 4px; height: 18px; position: relative; }
.tm-page .tm-bar-fill { height: 100%; border-radius: 4px; background: var(--tm-navy); min-width: 2px; }
.tm-page .tm-bar-fill.alt { background: var(--tm-accent); }
.tm-page .tm-bar-val { width: 46px; font-weight: 600; }

/* ---------- Toolbar ---------- */
.tm-page .tm-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 14px; align-items: center; }
.tm-page .tm-toolbar input[type="text"],
.tm-page .tm-toolbar input[type="search"],
.tm-page .tm-toolbar select {
    padding: 7px 10px; border: 1px solid var(--tm-border); border-radius: 6px;
    font-size: 13px; background: #fff; color: inherit; min-height: 34px;
}
.tm-page .tm-toolbar input[type="text"],
.tm-page .tm-toolbar input[type="search"] { width: 260px; }
.tm-page .tm-toolbar .tm-spacer { flex: 1; }
.tm-page .tm-toolbar label { font-weight: 600; }

/* ---------- Buttons ---------- */
.tm-page .tm-btn {
    padding: 8px 14px; border: 1px solid var(--tm-border); border-radius: 6px; cursor: pointer;
    background: #fff; font-size: 13px; color: var(--tm-text); min-height: 34px;
    display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.tm-page .tm-btn:hover:not(:disabled) { background: #f0f3f7; }
.tm-page .tm-btn:disabled { opacity: .5; cursor: not-allowed; }
.tm-page .tm-btn:focus-visible { outline: 2px solid var(--tm-blue); outline-offset: 1px; }
.tm-page .tm-btn-primary { background: var(--tm-navy); color: #fff; border-color: var(--tm-navy); }
.tm-page .tm-btn-primary:hover:not(:disabled) { background: var(--tm-navy-dark); }
.tm-page .tm-btn-accent { background: var(--tm-accent); color: #fff; border-color: var(--tm-accent); }
.tm-page .tm-btn-accent:hover:not(:disabled) { filter: brightness(.95); }
.tm-page .tm-btn-danger { background: var(--tm-red); color: #fff; border-color: var(--tm-red); }
.tm-page .tm-btn-sm { padding: 5px 10px; font-size: 12px; min-height: 28px; }
.tm-page .tm-btn .material-symbols-outlined { font-size: 17px; }

/* ---------- Tables ---------- */
.tm-page .tm-table-wrap {
    overflow-x: auto; background: var(--tm-card);
    border: 1px solid var(--tm-border); border-radius: 8px;
}
.tm-page table.tm-data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tm-page table.tm-data th {
    background: var(--tm-navy); color: #fff; padding: 8px 10px; text-align: start;
    white-space: nowrap; user-select: none; position: sticky; top: 0; z-index: 1;
}
.tm-page table.tm-data th.tm-sortable { cursor: pointer; }
.tm-page table.tm-data th .tm-sort-ind { color: var(--tm-accent); }
.tm-page table.tm-data td { padding: 7px 10px; border-bottom: 1px solid var(--tm-border); white-space: nowrap; }
.tm-page table.tm-data tbody tr.tm-clickable:hover { background: #eef4fb; cursor: pointer; }
.tm-page table.tm-data td.num { text-align: end; font-variant-numeric: tabular-nums; }
.tm-page table.tm-data td.tm-wrap { white-space: normal; min-width: 240px; }
.tm-page table.tm-data td.tm-wrap-wide { white-space: normal; min-width: 260px; }

/* ---------- Status / priority indicators ----------
   Kept as the source's pills so the log reads identically. Each carries its own
   glyph as well as its colour, so status is never colour-only. */
.tm-page .tm-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.tm-page .tm-pill .material-symbols-outlined { font-size: 13px; }
.tm-page .pill-SUBMITTED   { background: #d5e8d4; color: #1e6b3a; }
.tm-page .pill-ON-PROGRESS { background: #fdebd0; color: #9c640c; }
.tm-page .pill-APOLOGIZED  { background: #f2d7d5; color: #922b21; }
.tm-page .pill-NOT-YET     { background: #d6dbdf; color: #4d5656; }
.tm-page .pill-AWARDED     { background: #2e8b57; color: #fff; }
.tm-page .pill-LOST        { background: #f2d7d5; color: #922b21; }
.tm-page .pill-SHORTLISTED { background: #d4e6f1; color: #1a5276; }
.tm-page .pill-CANCELLED   { background: #d6dbdf; color: #4d5656; }
.tm-page .pill-RE-TENDER   { background: #fdebd0; color: #9c640c; }
.tm-page .pill-PENDING     { background: #fdebd0; color: #9c640c; }
.tm-page .pill-CONVERTED   { background: #d5e8d4; color: #1e6b3a; }
.tm-page .pill-CLOSED      { background: #d6dbdf; color: #4d5656; }
.tm-page .pill-STRATEGIC   { background: #e8a33d; color: #fff; letter-spacing: .3px; }
.tm-page .pill-APOLOGY     { background: #fadbd8; color: #922b21; }
.tm-page .pill-default     { background: #eaecee; color: #566573; }

/* Text for assistive tech only — the attachment column's header is an icon,
   which reads as nothing without it. */
.tm-page .tm-visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Attachment cell ---------- */
.tm-page td.tm-att-cell { cursor: pointer; text-align: center; font-size: 14px; }
.tm-page td.tm-att-cell:hover { background: #dbe8f6; }
.tm-page .tm-att-count {
    background: var(--tm-navy); color: #fff; border-radius: 9px; font-size: 10px;
    padding: 1px 6px; margin-inline-start: 3px; font-weight: 700; vertical-align: top;
}
.tm-page .tm-att-cat {
    font-weight: 700; font-size: 12.5px; color: var(--tm-navy); text-transform: uppercase;
    letter-spacing: .5px; margin: 14px 0 4px; padding-block-end: 4px; border-bottom: 2px solid var(--tm-navy);
}
.tm-page .tm-att-cat:first-child { margin-block-start: 0; }
.tm-page .tm-att-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 6px 26px; border-bottom: 1px solid var(--tm-border); font-size: 13px;
}
.tm-page .tm-att-row .tm-att-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-page .tm-att-row .tm-att-meta { color: var(--tm-muted); font-size: 11.5px; white-space: nowrap; }
.tm-page .tm-att-path {
    background: #eaf2fa; border: 1px solid #c7dbee; border-radius: 6px;
    padding: 8px 12px; margin-block-end: 14px; font-size: 12.5px; color: var(--tm-navy);
}

/* ---------- Benchmark grid ---------- */
.tm-page tr.tm-bm-groups th {
    background: var(--tm-navy-dark); color: var(--tm-accent); text-align: center;
    border-right: 2px solid rgba(255,255,255,.25); font-size: 11px; letter-spacing: 1px;
}
.tm-page tr.tm-bm-project td {
    background: #e3ecf5; color: var(--tm-navy); font-weight: 700;
    border-top: 2px solid var(--tm-navy); font-size: 12.5px;
}
.tm-page tbody tr.tm-bm-project:hover { background: #e3ecf5; cursor: default; }
.tm-page .tm-bm-project-count { font-weight: 400; color: var(--tm-muted); font-size: 11px; }
.tm-page .tm-bm-lock { color: #b0bcc9; font-size: 12px; }

/* ---------- In-place dropdown cell editing ---------- */
.tm-page td.tm-ec { cursor: pointer; }
.tm-page td.tm-ec .tm-ec-caret { color: #a8b6c4; font-size: 9px; margin-inline-start: 4px; opacity: 0; transition: opacity .12s; }
.tm-page tbody tr:hover td.tm-ec .tm-ec-caret { opacity: 1; }
.tm-page tbody tr:hover td.tm-ec:hover { background: #dbe8f6; box-shadow: inset 0 0 0 1px var(--tm-blue); }
.tm-page .tm-ec-select {
    font-size: 12px; padding: 2px 4px; border: 1px solid var(--tm-blue); border-radius: 4px;
    max-width: 160px; background: #fff; font-family: inherit;
}
@media (prefers-reduced-motion: reduce) {
    .tm-page td.tm-ec .tm-ec-caret { transition: none; }
}

/* ---------- Pager ---------- */
.tm-page .tm-pager {
    display: flex; gap: 8px; align-items: center; justify-content: flex-end;
    padding: 10px 4px; font-size: 12.5px; color: var(--tm-muted);
}

/* ---------- Dashboard extras ---------- */
.tm-page .tm-slices { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.tm-page .tm-slice {
    background: var(--tm-bg); border: 1px solid var(--tm-border); border-radius: 8px;
    padding: 10px 12px; text-align: center;
}
.tm-page .tm-slice-val { font-size: 18px; font-weight: 700; color: var(--tm-navy); }
.tm-page .tm-slice-label {
    font-size: 10.5px; color: var(--tm-muted); text-transform: uppercase;
    letter-spacing: .4px; margin-block-start: 3px;
}
.tm-page .tm-yoy { font-size: 15px; font-weight: 700; color: var(--tm-muted); }
.tm-page .tm-yoy-up { color: var(--tm-green); }
.tm-page .tm-yoy-down { color: var(--tm-red); }

.tm-page .tm-mini-scroll { max-height: 320px; overflow-y: auto; }
.tm-page table.tm-data.tm-mini { font-size: 12px; }
.tm-page table.tm-data.tm-mini th { padding: 6px 8px; position: static; }
.tm-page table.tm-data.tm-mini td { padding: 5px 8px; }
.tm-page table.tm-data.tm-mini td.tm-mini-name { white-space: normal; min-width: 140px; max-width: 260px; }
.tm-page .tm-card-more {
    float: inline-end; font-size: 11px; font-weight: 400; color: var(--tm-blue);
    text-decoration: none; text-transform: none; letter-spacing: 0;
}
.tm-page .tm-card-more:hover { text-decoration: underline; }
.tm-page .tm-due {
    display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
    font-weight: 600; background: #eaecee; color: #566573; white-space: nowrap;
}
.tm-page .tm-due-soon { background: #fdebd0; color: #9c640c; }
.tm-page .tm-due-over { background: #f2d7d5; color: #922b21; }

/* ---------- Record window ----------
   The source opens records in a centred modal. Reproduced here because the
   brief was an exact port; the portal standard prefers a side panel, which is
   noted in docs/modules/tender-manager.md as the one open design question. */
.tm-modal-overlay {
    position: fixed; inset: 0; background: rgba(15,25,40,.55); z-index: 1200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tm-modal {
    background: #fff; border-radius: 10px; width: 900px; max-width: 100%;
    max-height: 92vh; display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,.25); color: #22303e; font-size: 14px;
    --tm-navy: #1b3a5c; --tm-navy-dark: #12283f; --tm-accent: #e8a33d;
    --tm-border: #dde3ea; --tm-muted: #6b7a89; --tm-blue: #2471a3;
    --tm-red: #c0392b; --tm-green: #2e8b57; --tm-amber: #d68910; --tm-bg: #f4f6f9;
    --tm-text: #22303e; --tm-card: #fff;
}
.tm-modal.tm-modal-narrow { width: 620px; }
.tm-modal-header {
    padding: 14px 20px; border-bottom: 1px solid var(--tm-border);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.tm-modal-header h2 { font-size: 16px; color: var(--tm-navy); margin: 0; }
.tm-modal-close {
    border: none; background: none; font-size: 24px; cursor: pointer;
    color: var(--tm-muted); line-height: 1; padding: 0 4px;
}
.tm-modal-close:focus-visible { outline: 2px solid var(--tm-blue); }
.tm-modal-body { padding: 18px 20px; overflow-y: auto; }
.tm-modal-footer {
    padding: 12px 20px; border-top: 1px solid var(--tm-border);
    display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* The modal renders outside .tm-page, so the shared primitives it uses are
   repeated for its subtree rather than duplicated by hand in the markup. */
.tm-modal .tm-btn {
    padding: 8px 14px; border: 1px solid var(--tm-border); border-radius: 6px; cursor: pointer;
    background: #fff; font-size: 13px; color: var(--tm-text); min-height: 34px;
    display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.tm-modal .tm-btn:hover:not(:disabled) { background: #f0f3f7; }
.tm-modal .tm-btn:disabled { opacity: .5; cursor: not-allowed; }
.tm-modal .tm-btn:focus-visible { outline: 2px solid var(--tm-blue); outline-offset: 1px; }
.tm-modal .tm-btn-primary { background: var(--tm-navy); color: #fff; border-color: var(--tm-navy); }
.tm-modal .tm-btn-accent { background: var(--tm-accent); color: #fff; border-color: var(--tm-accent); }
.tm-modal .tm-btn-danger { background: var(--tm-red); color: #fff; border-color: var(--tm-red); }
.tm-modal .tm-btn-sm { padding: 5px 10px; font-size: 12px; min-height: 28px; }
.tm-modal .tm-btn .material-symbols-outlined { font-size: 17px; }
.tm-modal .tm-notice { display: flex; align-items: center; gap: 8px; border-radius: 6px; padding: 8px 12px; margin-block-end: 12px; font-size: 12.5px; }
.tm-modal .tm-notice-ok { background: #eaf6ef; border: 1px solid #bfe0cd; color: #1e6b3a; }
.tm-modal .tm-notice-err { background: #fdf1ef; border: 1px solid #e6bcb6; color: #922b21; }
.tm-modal .tm-att-cat {
    font-weight: 700; font-size: 12.5px; color: var(--tm-navy); text-transform: uppercase;
    letter-spacing: .5px; margin: 14px 0 4px; padding-block-end: 4px; border-bottom: 2px solid var(--tm-navy);
}
.tm-modal .tm-att-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; border-bottom: 1px solid var(--tm-border); font-size: 13px;
}
.tm-modal .tm-att-row .tm-att-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-modal .tm-att-row .tm-att-meta { color: var(--tm-muted); font-size: 11.5px; white-space: nowrap; }
.tm-modal .tm-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap;
}

/* ---------- Forms ---------- */
.tm-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
.tm-form-grid .tm-full { grid-column: 1 / -1; }
.tm-form-grid .tm-two { grid-column: span 2; }
@media (max-width: 760px) { .tm-form-grid { grid-template-columns: 1fr; } .tm-form-grid .tm-two, .tm-form-grid .tm-full { grid-column: 1 / -1; } }
.tm-field label {
    display: block; font-size: 11px; font-weight: 600; color: var(--tm-muted);
    text-transform: uppercase; margin-block-end: 4px; letter-spacing: .4px;
}
.tm-field input, .tm-field select {
    width: 100%; padding: 7px 9px; border: 1px solid var(--tm-border);
    border-radius: 6px; font-size: 13px; font-family: inherit; color: inherit; min-height: 34px;
}
.tm-field input[readonly] { background: #f0f3f7; color: var(--tm-muted); }
.tm-field input:focus-visible, .tm-field select:focus-visible {
    outline: 2px solid rgba(36,113,163,.55); border-color: var(--tm-blue);
}
.tm-field .tm-field-error { color: #922b21; font-size: 11.5px; margin-block-start: 3px; display: block; }
.tm-field input.tm-invalid, .tm-field select.tm-invalid { border-color: #c0392b; }
.tm-derived-note { font-size: 12px; color: var(--tm-muted); margin-block-start: 10px; }
.tm-page .tm-derived-note { color: var(--tm-muted); }

.tm-parent-link {
    background: #eaf2fa; border: 1px solid #c7dbee; border-radius: 6px;
    padding: 8px 12px; margin-block-end: 14px; font-size: 13px; color: var(--tm-navy);
}

/* ---------- Type-ahead ---------- */
.tm-ac-wrap { position: relative; }
.tm-ac-list {
    position: absolute; top: 100%; inset-inline: 0; z-index: 1300;
    background: #fff; border: 1px solid var(--tm-blue); border-top: none;
    border-radius: 0 0 6px 6px; max-height: 230px; overflow-y: auto;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.tm-ac-item { padding: 7px 10px; font-size: 12.5px; cursor: pointer; }
.tm-ac-item:hover, .tm-ac-item.tm-active { background: #eef4fb; }
.tm-ac-new { padding: 6px 10px; font-size: 11px; color: var(--tm-amber); border-top: 1px dashed var(--tm-border); }

/* ---------- New-task project picker ---------- */
.tm-task-results {
    margin-block-start: 12px; max-height: 46vh; overflow-y: auto;
    border: 1px solid var(--tm-border); border-radius: 6px;
}
.tm-task-item {
    display: grid; grid-template-columns: 90px 1fr 220px; gap: 10px; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid var(--tm-border); cursor: pointer;
    font-size: 13px; width: 100%; text-align: start; background: none; border-inline: none; border-top: none; font-family: inherit;
}
.tm-task-item:hover, .tm-task-item:focus-visible { background: #eef4fb; }
.tm-task-item .tm-task-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-task-item .tm-task-client { color: var(--tm-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-task-item .tm-task-parent { font-size: 10.5px; color: var(--tm-amber); }

/* ---------- List Manager ---------- */
.tm-page .tm-lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tm-page .tm-list-card ul { list-style: none; margin: 8px 0; padding: 0; max-height: 260px; overflow-y: auto; }
.tm-page .tm-list-card li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 8px; border-bottom: 1px solid var(--tm-border); font-size: 13px;
}
.tm-page .tm-list-card li button {
    border: none; background: none; color: var(--tm-red); cursor: pointer;
    font-size: 15px; line-height: 1; padding: 2px 6px; font-family: inherit;
}
.tm-page .tm-list-card li button:focus-visible { outline: 2px solid var(--tm-blue); }
.tm-page .tm-list-add { display: flex; gap: 6px; }
.tm-page .tm-list-add input {
    flex: 1; padding: 6px 8px; border: 1px solid var(--tm-border);
    border-radius: 6px; font-size: 13px; font-family: inherit; min-height: 32px;
}

/* ---------- Data & Export ---------- */
.tm-page .tm-setting-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 0;
    border-bottom: 1px solid var(--tm-border); flex-wrap: wrap;
}
.tm-page .tm-setting-row:last-child { border-bottom: none; }
.tm-page .tm-setting-desc { flex: 1; min-width: 260px; }
.tm-page .tm-setting-desc b { display: block; margin-block-end: 2px; }
.tm-page .tm-setting-desc span { color: var(--tm-muted); font-size: 12.5px; }

/* ---------- Print ----------
   The three reports are printed and circulated; the source tuned this to fit
   an A4 landscape page, so the same tuning is kept. The portal chrome is
   suppressed the way the source suppressed its own sidebar. */
@media print {
    @page { size: A4 landscape; margin: 8mm; }
    .tm-page .tm-toolbar, .tm-page .tm-pager, .tm-modal-overlay { display: none !important; }
    .tm-page .tm-title { font-size: 15px; margin-block-end: 2px; }
    .tm-page .tm-sub { font-size: 10px; }
    .tm-page .tm-kpi-row { break-inside: avoid; gap: 8px; }
    .tm-page .tm-kpi { padding: 6px 8px; }
    .tm-page .tm-kpi .tm-kpi-value { font-size: 16px; }
    .tm-page .tm-table-wrap { overflow: visible !important; border: none !important; }
    .tm-page table.tm-data { width: 100% !important; font-size: 8px; }
    .tm-page table.tm-data th {
        position: static !important; padding: 3px 4px; font-size: 8px;
        background: #1b3a5c !important; color: #fff !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .tm-page table.tm-data td {
        white-space: normal !important; min-width: 0 !important; max-width: none !important;
        padding: 2px 4px; word-break: break-word; overflow-wrap: anywhere;
    }
    .tm-page table.tm-data tbody tr { page-break-inside: avoid; }
    .tm-page .tm-pill, .tm-page .tm-att-count, .tm-page .tm-due {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .tm-page td.tm-att-cell, .tm-page .tm-ec-caret, .tm-page .tm-card-more { display: none !important; }
}