, debajo del top-row de 64px (--header-height). Con height:100vh el contenido medía 100vh + 64px y desbordaba el viewport: el hacía scroll y el .sidebar (sticky, 100vh) no cubría el sobrante, dejando espacio en blanco bajo el menú, bajo el contenido y el gutter de scroll a la derecha. Restar el header hace que main = top-row + este contenedor = 100vh exacto. */ height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; /* UX-DS-03.04 — variant-A --bg-page (era #f5f5f5 literal) */ background: var(--bg-page); /* Anchor for the full-view initial-loading overlay (.tracker-initial-loading). */ position: relative; } /* Full-view initial loading (2026-07) — covers the entire tracker while OnInitializedAsync resolves the views/tabs/columns and loads the first page, so the user never sees the empty-table → tabs → data flash. */ .tracker-initial-loading { position: absolute; inset: 0; z-index: 50; background: var(--bg-page); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .tracker-initial-loading__spinner { width: 2.75rem; height: 2.75rem; color: var(--med-blue-interactive, #0067b8); } .tracker-initial-loading__text { margin: 0; font-size: .95rem; font-weight: 600; color: var(--med-gray-medium, #666); } /* ===== HEADER ===== H-03 (feedback 2026-08-08) — el encabezado del tracker (.tracker-header, su h1 y .tracker-actions) se retiró: repetía el nombre de la pantalla y su franja —16px de margen inferior más el alto del título— se la comía a la tabla. Las acciones globales viven ahora en el panel de la vista (ranura Actions de ViewTabBar). Las reglas se borran con el marcado para que nadie las reviva por accidente. */ /* ===== CIERRE DERECHO DE LA BARRA DE FILTROS ===== Hospeda el contador de filas y el disparador de "seleccionar esta columna en todas las filas filtradas" (H-04). Los dos en la MISMA línea, alineados a la base de los controles: el bloque mide lo que mide un botón chico, menos que un grupo de filtro, así que no fija el alto de la barra ni agrega renglón. Es el equivalente de .ds-filter-bar__meta del sistema de diseño. */ .filter-trailing { margin-left: auto; display: flex; align-items: center; gap: var(--spacing-md); /* Alinea con la base de los controles, no con la de las etiquetas. */ padding-bottom: 2px; } .bulk-column-actions { display: flex; } /* Botón chico calcado de .ds-filter-bar__add: contorno punteado, tamaño xs, sin relleno. Antes era un `btn btn-outline-secondary btn-sm` de Bootstrap con la etiqueta larga completa, y ese par —alto de botón mediano más texto de treinta caracteres— era justo lo que no dejaba entrar el cierre en la línea de los filtros. La explicación completa vive en el `title`. */ .bulk-column-btn { background: none; border: 1px dashed var(--med-blue-interactive); color: var(--med-blue-interactive); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); padding: 3px var(--spacing-sm); cursor: pointer; white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast); } .bulk-column-btn:hover { background: var(--selection-bg); } /* Hints de descubribilidad (NOTA-PENDIENTE 2026-08-13, punto 1) — el anuncio de los filtros avanzados por entidad (Has Phase / Task Name / Task Status / Part). Mismo lenguaje visual que .bulk-column-btn (contorno punteado xs) para que el cierre derecho se lea como una familia. */ /* (TRK-OLA1A.05/.06 — .advanced-filters-btn retired with its button.) */ /* ===== TRK-OLA1A.02 — CHIP ZONE (functional layout; the mtmp skin lands in story .06) ===== */ .tracker-chip-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 2 1 auto; padding: 2px 4px; border-radius: 10px; } .tracker-chips-empty { font-size: var(--font-size-xs); color: var(--med-gray-tertiary, #6B7A90); } .tracker-chip-wrap { position: relative; display: inline-flex; } .trk-chip { display: inline-flex; align-items: center; border: 1px solid #BFD8F7; background: #EAF3FE; border-radius: 999px; font-size: var(--font-size-xs); line-height: 1; overflow: hidden; } .trk-chip--editing { border-color: #117BFF; } .trk-chip__body { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 5px 4px 5px 10px; cursor: pointer; font-size: inherit; } .trk-chip__val { font-family: var(--font-mono, ui-monospace, monospace); /* T-05 (heredado de los selects retirados): un valor largo se trunca, el chip no rompe la línea. */ max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trk-chip__body:hover .trk-chip__val { text-decoration: underline; } .trk-chip__key { font-weight: 600; } .trk-chip__x { border: 0; background: transparent; padding: 5px 8px; cursor: pointer; font-size: inherit; color: #4a5a72; } .trk-chip__x:hover { color: #B3261E; } .trk-value-picker { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; /* 240→320 (2026-08-21): con 240 los valores largos ("CDP/SCC Closure - Sustaining (CDP)") envolvían en dos y tres líneas. La escala tipográfica común vive más abajo. */ min-width: 320px; max-width: 440px; max-height: 360px; overflow: auto; background: #fff; border: 1px solid #DCE5F2; border-radius: 12px; box-shadow: 0 8px 24px rgba(7, 26, 61, 0.14); padding: 12px; } .trk-picker__title { font-size: var(--font-size-xs); font-weight: 600; margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; } .trk-picker__sub { font-weight: 400; color: #6B7A90; } .trk-picker__options { display: flex; flex-direction: column; } .trk-picker__opt { text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: var(--font-size-xs); } .trk-picker__opt:hover { background: #F1F7FF; } .trk-picker__opt--on { background: #EAF3FE; font-weight: 600; } .trk-picker__empty { font-size: var(--font-size-xs); color: #6B7A90; padding: 4px 8px; } .trk-picker__footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; } .trk-picker__apply { border: 0; background: #117BFF; color: #fff; border-radius: 8px; padding: 5px 12px; cursor: pointer; font-size: var(--font-size-xs); } .trk-picker__apply:disabled { opacity: 0.5; cursor: not-allowed; } .trk-picker__cancel { border: 0; background: transparent; color: #4a5a72; cursor: pointer; font-size: var(--font-size-xs); } /* ===== TRK-OLA1A.04 — unsaved cluster + amber dirty zone (functional; mtmp skin in .06) ===== */ .tracker-chip-zone--dirty { background: var(--pill-amber-bg, #FFF4D6); box-shadow: inset 0 0 0 1px var(--mtmp-warning, #F5A623); border-radius: 10px; padding-bottom: 6px; } .trk-unsaved { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; } .trk-unsaved__label { color: var(--pill-amber-text, #B07E10); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .trk-unsaved__save { border: 0; background: var(--mtmp-primary, #117BFF); color: #fff; border-radius: var(--mtmp-radius-md, 12px); padding: 4px 12px; font-size: var(--font-size-xs); cursor: pointer; } .trk-unsaved__save:disabled { opacity: 0.5; cursor: not-allowed; } .trk-unsaved__discard { border: 0; background: transparent; color: #4a5a72; text-decoration: underline; font-size: var(--font-size-xs); cursor: pointer; } .trk-save-toast { font-size: var(--font-size-xs); color: #1D7A3E; margin-left: 6px; } /* ===== TRK-OLA1A.03 — "+ Add filter" + field palette (functional; mtmp skin in .06) ===== */ .tracker-add-filter-anchor { position: relative; } .add-filter-btn { border: 1px dashed #9DB8DC; background: transparent; color: #2A5AA2; border-radius: var(--mtmp-radius-pill, 999px); font-size: var(--font-size-xs); padding: 5px 12px; cursor: pointer; white-space: nowrap; } .add-filter-btn:hover { background: #F1F7FF; } .trk-palette { min-width: 320px; max-width: 400px; } .trk-palette__input { width: 100%; box-sizing: border-box; border: 1px solid var(--mtmp-border-gray, #DCE5F2); border-radius: 8px; padding: 6px 10px; font-size: var(--font-size-xs); margin-bottom: 6px; } .trk-palette__results { max-height: 240px; overflow: auto; display: flex; flex-direction: column; } .trk-palette__group { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mtmp-text-gray, #6B7A90); padding: 6px 8px 2px; } .trk-palette__gcount { opacity: 0.7; } .trk-palette__item { text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; } .trk-palette__item:hover { background: #F1F7FF; } .trk-palette__item--hi { background: var(--pill-blue-bg, #EAF3FE); } .trk-palette__label { font-size: var(--font-size-xs); font-weight: 600; } .trk-palette__sub { font-size: 11px; color: var(--mtmp-text-gray, #6B7A90); } .trk-palette__empty { font-size: var(--font-size-xs); padding: 8px; color: var(--mtmp-dark-text, #1D2C48); } .trk-palette__footer { border-top: 1px solid #EDF2F7; margin-top: 6px; padding-top: 6px; font-size: 10px; color: var(--mtmp-text-gray, #6B7A90); } /* TRK-OLA1A.06 — motion is decorative only; honor reduced-motion (spec §Accessibility). */ .trk-value-picker, .trk-save-toast, .trk-unsaved { transition: opacity 200ms ease; } @media (prefers-reduced-motion: reduce) { .trk-value-picker, .trk-save-toast, .trk-unsaved { transition: none; } } /* ===== FILTERS ===== ⚠ PENDIENTE DE REDISEÑO — docs/design/NOTA-PENDIENTE-BARRA-FILTROS-TRACKER-2026-08-11.md El apretón de abajo resuelve el espacio pero no convenció; se dejó así para no frenar la corrección de los defectos de Medtronic. La nota trae qué explorar (chips + DsFilterBar en vez de siete selects permanentes) y qué NO se puede deshacer sin reabrir H-03, H-04 y FD-02. Sesión Medtronic 2026-08-11 — la barra se apretó a las proporciones del sistema de diseño (DsFilterBar): controles más chicos, etiquetas más chicas y huecos de token en vez de 16px. El motivo no es estética: con siete controles a 120px de ancho mínimo y 54px de alto, el cierre derecho (contador + disparador de selección) no cabía en la misma línea y se envolvía, dejando un renglón casi vacío dentro del card. Achicando los controles todo entra en una línea y la barra baja de ~86px a ~62px, que es alto que gana la tabla. */ /* TRK-OLA1A.06 (G7/FD-03) — THE bar is one mtmp-card row (radius 16, soft shadow, white on the cloud ground). Chip zone (left, the only side that ever goes amber) · divider · View-lens pill (TRK-OLA1B.01 — the reserved end, delivered) · counter · column-select trigger. The GRID below keeps its skin — the card is the whole scope of the re-skin. Derived pill families are declared as local custom properties over the mtmp tokens. */ .tracker-bar { --pill-blue-bg: #EAF3FE; /* soft fill derived from --mtmp-electric-blue over white */ --pill-blue-border: #BFD8F7; --pill-amber-bg: #FFF4D6; --pill-amber-text: #B07E10; /* AA on --pill-amber-bg (spec §Accessibility) */ display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm) var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); background: var(--mtmp-white, #FFFFFF); border: 1px solid var(--mtmp-border-gray, #DCE5F2); border-radius: var(--mtmp-radius-lg, 16px); box-shadow: var(--mtmp-shadow-soft, 0 8px 24px rgba(6, 20, 44, 0.08)); margin-bottom: var(--spacing-sm); } .tracker-bar__divider { align-self: stretch; width: 1px; background: var(--mtmp-border-gray, #DCE5F2); } .tracker-filters { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); align-items: flex-end; flex: 1 1 auto; } .filter-group { display: flex; flex-direction: column; gap: 2px; } .filter-group label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-secondary); text-transform: uppercase; } /* (TRK-OLA1A.06 — the retired selects/search-input rules removed with their controls.) */ /* (TRK-OLA1A.05/.06 — phase-filter multi-select styles retired with the control.) */ /* Story TRK-OLA1B.01 (AC1/AC2, FD-08) — the View lens: microlabel + OUTLINED pill (mode grammar, never a chip) past the bar divider, and its popover (the visualization family's ONE home). The PRT-1B.09 detail-level

died here — its checkboxes live inside the popover now. Grammar: white pill, --mtmp-border-gray border, ◐, no ×; active = primary border + soft-sky tint. */ /* flex-direction explícita: el elemento también es .filter-group, cuya regla (columna) ganaría por orden de cascada sin esta declaración — el microlabel debe quedar EN LÍNEA con la pill (FD-08). */ .tracker-lens-anchor { position: relative; display: flex; flex-direction: row; align-items: center; gap: 6px; } .lens-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--mtmp-text-gray, #6B7A90); white-space: nowrap; } .lens-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--mtmp-white, #FFFFFF); border: 1px solid var(--mtmp-border-gray, #DCE5F2); color: var(--mtmp-light-navy, #22456F); border-radius: var(--mtmp-radius-pill, 999px); font-size: 12px; font-weight: 700; padding: 4px 12px; white-space: nowrap; cursor: pointer; } .lens-pill:hover { border-color: var(--mtmp-primary, #117BFF); } .lens-pill .lens-state { font-weight: 500; /* AA (AC2): el resumen es texto SIEMPRE visible — --mtmp-text-gray (4.37:1) no alcanza el piso 4.5:1 en 12px; light-navy (~8:1 sobre blanco y sobre soft-sky) sí (review .01, hallazgo 9). */ color: var(--mtmp-light-navy, #274B85); max-width: 26ch; overflow: hidden; text-overflow: ellipsis; } .lens-pill.lens-active { border: 1.5px solid var(--mtmp-primary, #117BFF); background: var(--mtmp-soft-sky, #EAF3FE); } .popover-lens { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; /* Ancho estilo prototipo: los catálogos traen nombres largos (tareas ~115) y a 340px cada renglón envolvía en 2-3 líneas. Acotado al viewport en pantallas chicas. */ min-width: 420px; max-width: min(640px, calc(100vw - 48px)); max-height: 440px; overflow: auto; background: var(--mtmp-white, #FFFFFF); border: 1px solid var(--mtmp-border-gray, #DCE5F2); border-radius: 12px; box-shadow: 0 8px 24px rgba(7, 26, 61, 0.14); padding: 10px; } .popover-lens .pop-title { font-size: var(--font-size-xs); font-weight: 700; display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; border-left: 3px solid var(--mtmp-primary, #117BFF); padding-left: 8px; } .popover-lens .pop-sub { font-weight: 400; color: var(--mtmp-text-gray, #6B7A90); } .popover-lens .pop-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mtmp-text-gray, #6B7A90); margin: 8px 0 2px; } .popover-lens .pop-groupsub { font-weight: 400; text-transform: none; letter-spacing: normal; } .popover-lens .pop-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: var(--font-size-xs, 12px); /* La regla de microlabels de la barra (.filter-group label) alcanza los labels anidados del popover — sin este reset, fases y tareas se pintan EN ALTAS con tracking de rótulo. */ text-transform: none; letter-spacing: normal; color: var(--mtmp-dark-text, #1D2C48); } .popover-lens .pop-item:hover { background: #F1F7FF; } /* Preset encendido — afordance visual además del aria-pressed (review .03, hallazgo 6). */ .popover-lens .pop-item-on { background: var(--mtmp-soft-sky, #EAF3FE); } /* Tamaño fijado en el span: una regla global de labels (create-project-enhanced.css) infla la fuente heredada a 14px — el prototipo lista los nombres más compactos. */ .popover-lens .pop-item-label { font-weight: 600; font-size: var(--font-size-xs, 12px); } .popover-lens .pop-item-sub { flex-basis: 100%; color: var(--mtmp-text-gray, #6B7A90); } .popover-lens .pop-pending { font-size: var(--font-size-xs); color: var(--mtmp-text-gray, #6B7A90); padding: 2px 8px 4px; } .popover-lens .pop-footer { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--mtmp-border-gray, #DCE5F2); font-size: 10px; color: var(--mtmp-text-gray, #6B7A90); } /* Buscador de los catálogos largos del popover (fases/tareas) — filtro de display. */ .popover-lens .pop-filter { width: 100%; margin: 2px 0 4px; padding: 4px 8px; font-size: var(--font-size-xs, 12px); color: var(--mtmp-dark-text, #1D2C48); background: var(--mtmp-white, #FFFFFF); border: 1px solid var(--mtmp-border-gray, #DCE5F2); border-radius: 6px; } .popover-lens .pop-filter:focus { outline: 2px solid var(--mtmp-primary, #117BFF); outline-offset: 1px; border-color: var(--mtmp-primary, #117BFF); } /* Checkbox plano estilo prototipo (☐/☑): caja delineada + palomita de glifo, sin el checkbox nativo azul del navegador. El input sigue siendo real (test ids intactos). */ .lens-detail-opt input { min-width: auto; appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; margin: 0; display: inline-grid; place-content: center; background: var(--mtmp-white, #FFFFFF); border: 1.5px solid var(--mtmp-text-gray, #6B7A90); border-radius: 3px; cursor: pointer; } .lens-detail-opt input:checked { border-color: var(--mtmp-dark-text, #1D2C48); } .lens-detail-opt input:checked::before { content: "✓"; font-size: 11px; line-height: 1; font-weight: 700; color: var(--mtmp-dark-text, #1D2C48); } .lens-detail-opt input:focus-visible { outline: 2px solid var(--mtmp-primary, #117BFF); outline-offset: 1px; } /* Story PRT-1B.09 (AC1) — contador k/n de la línea agregada. Monoespaciado para que "2/5" y "10/12" no bailen de ancho al conmutar el detalle. */ .task-part-aggregate { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 3px; background: var(--row-task-bg); color: var(--med-gray-medium); border: 1px solid var(--grid-line); flex-shrink: 0; white-space: nowrap; cursor: help; } /* El empuje a la derecha lo hace ahora .filter-trailing, que envuelve al contador junto con el disparador de selección por columna (2026-08-11). Cifras tabulares para que el número no cambie de ancho al filtrar y el botón de al lado no baile. */ .filter-count { font-size: var(--font-size-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ===== TABLE WRAPPER ===== */ /* Feedback 2026-08-20 (1a978554) — el grid ahora tiene DOS cajas: un shell exterior que NO scrollea (ancla de los indicadores de scroll horizontal — ver HORIZONTAL SCROLL INDICATORS abajo) y el wrapper interior, que sigue siendo el scroll container. flex:1 y el margen para la barra de cambios sin guardar suben al shell (ahora él es el hijo flex de .tracker-container); el wrapper llena el shell por completo para que los overlays del shell coincidan con los bordes visibles del grid. */ .tracker-grid-shell { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 60px; /* Space for unsaved changes bar */ } .tracker-table-wrapper { flex: 1; min-height: 0; overflow: auto; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } /* ===== TABLE ===== */ /* table-layout: fixed (perf quick-win 3.4, PROPOSAL-TRACKER-SCROLL-PERF-2026-07-06): with ~400 columns in wide views, the auto table-layout algorithm re-measures cell CONTENT on every DOM patch/reflow (each Virtualize windowing pass); fixed layout sizes columns from the first header row only — O(columns), no content measuring — and keeps the table width stable across windowing (no layout shift as rows realize). Column widths come from the s: the frozen/special columns keep their explicit widths below; every other column gets the :where() low-specificity default (140px) so ANY existing class width rule still wins. Content that used to auto-widen its column now ellipsizes (see .project-row td below). */ .tracker-table { table-layout: fixed; width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; } /* Default column width under fixed layout. :where() keeps specificity at (0,0,1) so every existing width rule (.col-checkbox, .col-id, .col-tool, .col-wide, …) overrides it. */ :where(.tracker-table) th { width: 140px; } /* UX-DS-03.01 — worksheet header (Variant A thead th): white bg + 2px blue underline + small gray uppercase labels. Height from the DS token (--grid-header-h = 38px). background/color viajan vía --table-header-* (override en .tracker-container) porque la regla scoped de DsDataGrid (.ds-grid__head[b-x] th) gana en especificidad. */ .tracker-table th { background: var(--bg-white); color: var(--med-gray-medium); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; padding: 0 12px; height: var(--grid-header-h); border-bottom: 2px solid var(--med-blue-primary); text-align: left; white-space: nowrap; /* fixed table-layout (3.4): headers no longer widen their column, so long labels must ellipsize instead of bleeding over the neighbor th. */ overflow: hidden; text-overflow: ellipsis; user-select: none; position: sticky; top: 0; z-index: 10; } /* UX-DS-03.01 — la regla scoped de DsDataGrid declara font-weight:var(--font-weight-semibold) con especificidad (0,2,1) y su hoja viene después; este selector (0,2,2) la supera sin tocar el token global de tipografía. */ .tracker-table-wrapper table.tracker-table th { font-weight: 700; } /* Sortable Headers */ .tracker-table th.sortable { cursor: pointer; user-select: none; transition: background 0.15s ease; } /* UX-DS-03.01 — sortable hover/sorted al lenguaje del prototipo (variant-A.html:494): hover = texto azul + fondo amarillo suave; sorted = texto azul sobre blanco. */ .tracker-table th.sortable:hover { color: var(--med-blue-primary); background: var(--med-yellow-bg); } .tracker-table th.sortable.sorted { color: var(--med-blue-primary); background: var(--bg-white); } /* L-01 — el encabezado ahora entra al orden de tabulación, así que necesita un foco visible. `focus-visible` deja el anillo solo para la navegación por teclado, no para el clic. */ .tracker-table th.sortable:focus-visible { outline: 2px solid var(--med-blue-interactive); outline-offset: -2px; color: var(--med-blue-primary); background: var(--med-yellow-bg); } .tracker-table th.sortable::after { content: ''; display: inline-block; margin-left: 4px; opacity: 0.4; } .tracker-table td { padding: 0 12px; border-bottom: 1px solid var(--grid-line); vertical-align: middle; } /* Densidad de fila de proyecto (Variant A: 32px). Fase/tarea fijan su propia altura. */ /* nowrap+ellipsis (perf quick-win 3.4): under fixed table-layout a column no longer auto-widens to fit its content, so long values must truncate instead of wrapping (wrapping would break the 32px density AND the Virtualize ItemSize="32" hint). Bonus: single-line rows keep the spacer math exact. */ .project-row td { height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== FROZEN COLUMNS ===== */ .frozen { position: sticky; background: white; z-index: 5; } /* UX-DS-03.01 — frozen header cells: opaque white (variant-A.html:532) so the non-frozen columns don't bleed through under horizontal scroll. z-index preserved. */ th.frozen { background: var(--bg-white); z-index: 15; } .col-checkbox { left: 0; width: 40px; min-width: 40px; } /* OLA2.06 (C1=b) — ROW selection rides the BLUE axis: a left rail on the selected row + the checkbox accent, so a selected ROW reads as "whole row marked" and can never be confused with the TEAL per-cell selection (see .cell-selected). Class names untouched (UX-DS-05 diffing). */ .tracker-table tr.selected > td.col-checkbox { box-shadow: inset 3px 0 0 var(--mtmp-electric-blue, #117BFF); } .tracker-table td.col-checkbox input[type="checkbox"], .tracker-table th.col-checkbox input[type="checkbox"] { accent-color: var(--mtmp-electric-blue, #117BFF); } .col-expand { left: 40px; width: 30px; min-width: 30px; } /* Story 11B.14 (Q9) — frozen primary identity column now carries ProjectDisplayId (+ Intake badge) instead of the legacy int "#", so it is wider. col-tool shifts right to keep the sticky offsets exact. */ .col-id { left: 70px; width: 150px; min-width: 150px; max-width: 150px; overflow: hidden; } /* 300→400 (2026-08-21): la sub-fila de tarea ganó el selector de estado (~104px) además de la sangría del árbol, y a 300px el nombre de la tarea quedaba cortado a media palabra. Si este número cambia, actualiza TAMBIÉN la sombra de scroll `.has-scroll-left::before` (left = suma de las 4 congeladas) — es el único valor derivado a mano. */ .col-tool { left: 220px; width: 400px; min-width: 400px; max-width: 400px; overflow: hidden; text-overflow: ellipsis; } /* Fix (2026-07-06, found while validating the perf quick wins — PRE-EXISTING since the DS-02.01 DsDataGrid retrofit): the scoped primitive rule `.ds-grid[b-…] .ds-grid__cell--frozen { left: 0 }` (specificity (0,3,0) — the [b-…] scope attribute counts at class level — and its bundle MtmpProjectsPoc.Web.styles.css loads AFTER this file) beats the per-column offsets above ((0,1,0)) — so ALL four frozen columns computed left:0 and stacked on top of each other under horizontal scroll (only col-tool remained visible; checkbox/expand/id buried underneath). Confirmed live with a styleSheets walker. th/td variants make these (0,3,1) > (0,3,0), re-winning the staggered offsets. */ .tracker-table-wrapper .tracker-table th.col-checkbox, .tracker-table-wrapper .tracker-table td.col-checkbox { left: 0; } .tracker-table-wrapper .tracker-table th.col-expand, .tracker-table-wrapper .tracker-table td.col-expand { left: 40px; } .tracker-table-wrapper .tracker-table th.col-id, .tracker-table-wrapper .tracker-table td.col-id { left: 70px; } .tracker-table-wrapper .tracker-table th.col-tool, .tracker-table-wrapper .tracker-table td.col-tool { left: 220px; } /* Punto #7 — la razón del último replan, pegada al contador: chip discreto que cabe en la casilla. */ .phase-delay-reason { display: inline-block; max-width: 100%; margin-top: 1px; padding: 0 4px; border-radius: var(--radius-sm); background: var(--med-gray-light, #edf2f7); color: var(--med-gray-dark, #4a5568); font-size: 0.65rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Story 11B.14 (Q9) — ProjectDisplayId cell: single-line ellipsis text + the warning "Intake" chip. */ .col-display-id .display-id-text { display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-weight: 600; } /* ProjectDisplayId is a link that opens the project detail in a new tab. Styled as an interactive link (brand blue, underline on hover) so the affordance reads as clickable. */ .col-display-id a.display-id-link { color: var(--med-blue-interactive, #0067b8); text-decoration: none; cursor: pointer; } .col-display-id a.display-id-link:hover, .col-display-id a.display-id-link:focus-visible { text-decoration: underline; } /* Opción E (2026-07) — styled hover tooltip for truncated Tool/Phase/Task names. Rendered at level by tracker-tooltip.js (a "portal") so the frozen col-tool's overflow:hidden never clips it. position:fixed because JS positions it in viewport coords (getBoundingClientRect). Matches the dark .comment-preview look already in the grid. */ .tracker-tooltip { position: fixed; z-index: 3000; max-width: 360px; background: #1e293b; color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 0.75rem; line-height: 1.35; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); pointer-events: none; white-space: normal; word-break: break-word; } /* UX-DS-05.02 (CB-1.a) — divisor frozen como barra 1px compuesta (background), SIN box-shadow. El box-shadow sobre position:sticky repinta la columna congelada en cada frame de scroll horizontal; una barra de background es un fill barato y el ::after es overlay (no afecta el layout, los offsets frozen de 520px quedan intactos). Look idéntico. */ .col-tool::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--frozen-divider); } /* ===== ROWS ===== */ /* Zebra (Variant A --row-zebra). Va ANTES de hover/selected/expanded a propósito: misma especificidad → el orden de fuente deja ganar a los estados interactivos. */ .project-row.zebra, .project-row.zebra .frozen { background: var(--row-zebra); } .project-row:hover { background: var(--row-hover); } /* UX-DS-05.02 (CB-1.b) — el hover del cuerpo se conserva (regla de arriba); el highlight del spine frozen se ELIMINA a propósito: repintar el background de la celda sticky mientras el cursor recorre el grid la repinta por frame. Decisión Ivan 2026-07-04 (diseño §7.2). */ .project-row.selected { background: var(--row-selected); } .project-row.selected .frozen { background: var(--row-selected); } .project-row.expanded { background: var(--row-hover); } .project-row.expanded .frozen { background: var(--row-hover); } /* Feedback 2026-08-20 (1a978554.c) — el fondo de la celda sticky SIGUE el color de su fila, determinísticamente. Las reglas de arriba (.project-row.zebra .frozen etc., (0,3,0)) pierden contra la regla del primitivo `.ds-grid[b-…] .ds-grid__cell--frozen { background: var(--bg-white) }` ((0,3,0) pero su bundle MtmpProjectsPoc.Web.styles.css carga DESPUÉS de este archivo), y la paridad quedaba a merced de las reglas de sincronía del bundle ((0,4,0)). Estas cuatro reglas ((0,4,2)/(0,5,2)) ganan a todo lo del bundle y fijan la cascada sin importar orden de carga. Orden zebra → selected → expanded = el mismo de arriba y el del primitivo (los estados interactivos ganan por orden de fuente a igual especificidad). HOVER omitido a propósito: CB-1.b (UX-DS-05.02, decisión Ivan 2026-07-04) eliminó el repintado del spine congelado en hover porque repinta la celda sticky por frame; la regla hover del primitivo (DsDataGrid.razor.css:95) queda ahora también superada por estas, aplicando por fin esa decisión de manera consistente. */ .tracker-table-wrapper .tracker-table tr.project-row > td.frozen { background: var(--bg-white); } .tracker-table-wrapper .tracker-table tr.project-row.zebra > td.frozen { background: var(--row-zebra); } .tracker-table-wrapper .tracker-table tr.project-row.selected > td.frozen { background: var(--row-selected); } .tracker-table-wrapper .tracker-table tr.project-row.expanded > td.frozen { background: var(--row-hover); } /* ===== ROW VARIANTS (Variant A) ===== */ /* Intake: SIN tratamiento visual por fila (decisión 2026-07-03). Antes las filas de fase "Intake Form" llevaban franja azul + tool-name azul negrita (clase `npd-row`), que se leía inconsistente (aparecía en una mezcla de INT-* y PRJ en DRAFT) y multi-barra. Se eliminó: las filas intake se ven uniformes; el estado read-only se comunica por el checkbox deshabilitado (`IsIntake` sigue gateando bulk-selection). NPD es un badge propio, no una fila. */ /* Completed: fila atenuada + Tool Name tachado (Variant A). */ .project-row.completed td { color: var(--med-gray-medium); } .project-row.completed .tool-name-text { text-decoration: line-through; text-decoration-color: var(--med-gray-light); text-decoration-thickness: 1px; } /* Tool Name en una sola línea + ellipsis para no romper la densidad de 32px. Opción B (2026-07): la columna congelada pasó de 220px→300px; el texto sube su max-width en el mismo delta (150→230) para aprovechar el ancho extra. */ .col-tool .tool-name-text { display: inline-block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* ===== PHASES CONTAINER ROW ===== */ .phases-container-row { background: #f8fafc; } .phases-container-row .frozen { background: #f8fafc; } .phases-indent { border-right: 2px solid #e2e8f0; } .phases-cell { padding: 12px 16px !important; } /* ===== PHASES TIMELINE ===== */ .phases-timeline { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px 0; } .phase-connector { width: 24px; min-width: 24px; display: flex; align-items: center; justify-content: center; position: relative; } .phase-connector::before { content: ''; width: 100%; height: 2px; background: linear-gradient(90deg, #cbd5e1, #94a3b8); } /* ===== PHASE CARD (Tracker Timeline Only) ===== */ /* Scoped to .phases-timeline to avoid conflicts with PhaseCard component */ .phases-timeline .phase-card { background: white; border-radius: 8px; padding: 10px 14px; min-width: 160px; max-width: 180px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 6px; transition: all 0.2s ease; } .phases-timeline .phase-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-1px); } .phases-timeline .phase-card-complete { border-color: #10b981; background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); } .phases-timeline .phase-card-active { border-color: #3b82f6; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15); } .phases-timeline .phase-card-pending { border-color: #e2e8f0; background: #f8fafc; opacity: 0.7; } /* ===== PHASE HEADER ===== */ .phase-header { display: flex; align-items: center; gap: 6px; } /* C-27 — aquí vivía la PRIMERA de las dos generaciones de puntos de fase que este mismo archivo traía: `.phase-status-dot` con `.dot-complete` / `.dot-active` / `.dot-pending` en hex crudo, y más abajo `.phase-status-indicator.dot-*` con tokens. Ninguna de las clases de esta generación tenía consumidor: el marcado emite siempre `phase-status-indicator dot-*` (`ProjectTracker.razor:1157`), así que la generación tokenizada ganaba por especificidad y esta solo servía para confundir a quien buscara "de qué color es un punto de fase". Se borra entera; el fix de contraste de C-07 se mudó a la regla viva, más abajo. El keyframe `pulse` se va con ella: sus otros tres consumidores (project-detail.css, ownership.css, site.css) declaran el suyo en su propio archivo. */ .phase-title { font-size: 0.75rem; font-weight: 600; color: #334155; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phase-progress-badge { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 10px; white-space: nowrap; } .progress-badge-complete { background: #10b981; color: white; } .progress-badge-good { background: #3b82f6; color: white; } .progress-badge-started { background: #f59e0b; color: white; } .progress-badge-pending { background: #e2e8f0; color: #64748b; } /* ===== PHASE PROGRESS BAR ===== */ .phase-progress-bar { height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden; } .phase-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; } .fill-complete { background: linear-gradient(90deg, #10b981, #059669); } .fill-active { background: linear-gradient(90deg, #3b82f6, #2563eb); } .fill-pending { background: #cbd5e1; } /* ===== PHASE DATES ===== */ .phase-dates { display: flex; align-items: center; gap: 4px; margin-top: 2px; } .phase-date-input { font-size: 0.65rem; padding: 2px 4px; border: 1px solid #e2e8f0; border-radius: 4px; background: white; color: #475569; width: 90px; } .phase-date-input:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .phase-date-separator { color: #94a3b8; font-size: 0.7rem; } /* ===== PHASE COMMENT ===== */ .phase-comment { font-size: 0.65rem; color: #64748b; background: #f1f5f9; padding: 3px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== PHASE ROWS V2 (Compact Table Format) ===== */ /* UX-DS-03.03 — filas phase al lenguaje variant-A (tr.row-phase): bg unificado (el ESTADO vive en el dot + color del nombre, no en el bg de la fila), tree-line └─ mono, dot 9px con phasePulse. Hex Tailwind tokenizados. */ .phase-row-v2 { background: var(--row-phase-bg); font-size: 11.5px; line-height: 1.2; } .phase-row-v2 td { padding: 4px 6px !important; border-bottom: 1px solid var(--grid-line); height: 28px; vertical-align: middle; } .phase-row-v2 .frozen, .phase-row-v2.phase-complete .frozen, .phase-row-v2.phase-in-progress .frozen, .phase-row-v2.phase-pending .frozen { background: var(--row-phase-bg); } .phase-row-v2.phase-complete, .phase-row-v2.phase-in-progress, .phase-row-v2.phase-pending { background: var(--row-phase-bg); } /* Phase ID column */ .phase-row-v2 .phase-id { color: var(--med-gray-light); font-size: 0.7rem; } /* Phase Name Cell — indentación variant-A (18px). Especificidad (0,2,0) para ganar al `.phase-row-v2 td { padding: 4px 6px !important }` (0,1,1). */ .phase-row-v2 .phase-name-cell { padding-left: 18px !important; } .phase-name-content { display: flex; align-items: center; gap: 6px; } /* Tree-line └─ (variant-A .phase-tree) */ .phase-tree { font-family: var(--font-mono); color: var(--med-gray-light); letter-spacing: -0.5px; font-size: 0.9rem; } /* Dot de estado 9px (variant-A .phase-status-icon) */ .phase-status-indicator { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } /* C-27 — la generación superviviente, ahora contra el diccionario de estado de fase. */ .phase-status-indicator.dot-complete { background: var(--state-phase-completed-accent); } .phase-status-indicator.dot-active { background: var(--state-phase-inprogress-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--state-phase-inprogress-accent) 45%, transparent); animation: phasePulse 1.5s ease-in-out infinite; } /* C-07 — el punto de fase pendiente era un relleno claro sobre blanco: 1.48:1, prácticamente invisible. Un relleno claro no se rescata sin oscurecerlo hasta confundirlo con "completada", así que el estado pasa a un patrón de contorno — que además es el segundo portador de significado que pide el frente de accesibilidad. Borde a 7.38:1. */ .phase-status-indicator.dot-pending { background: var(--bg-white); border: 2px solid var(--state-phase-notstarted-fg); box-sizing: border-box; } @keyframes phasePulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--med-blue-interactive) 40%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } } @media (prefers-reduced-motion: reduce) { .phase-status-indicator.dot-active { animation: none; box-shadow: none; } } /* Nombre por estado (variant-A .phase-name) */ /* T-03 — el nombre de fase se cortaba contra la celda sin puntos suspensivos. */ .phase-name-text { font-weight: 600; color: var(--med-gray-dark); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .phase-row-v2.phase-complete .phase-name-text { color: var(--status-success-deep); } .phase-row-v2.phase-in-progress .phase-name-text { color: var(--med-blue-medium); } .phase-row-v2.phase-pending .phase-name-text { color: var(--med-gray-medium); } /* Phase Progress Cell */ .phase-progress-cell { min-width: 120px; } .phase-progress-wrapper { display: flex; align-items: center; gap: 8px; } /* La celda adelantada abarca 4 columnas (ver ProjectTracker.razor): sin esto la barra, que es `flex: 1`, se estiraría a todo ese ancho y el porcentaje volvería a irse a la derecha. Se le fija un largo sobrio y el grupo se ancla al inicio, junto al nombre de la fase. */ .phase-progress-cell--lead .phase-progress-wrapper { justify-content: flex-start; } .phase-progress-cell--lead .phase-progress-bar-v2 { flex: none; width: 120px; } .phase-progress-bar-v2 { flex: 1; height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden; min-width: 50px; } .phase-progress-fill-v2 { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .phase-progress-fill-v2.fill-complete { background: linear-gradient(90deg, #10b981, #059669); } .phase-progress-fill-v2.fill-active { background: linear-gradient(90deg, #3b82f6, #2563eb); } .phase-progress-fill-v2.fill-pending { background: #cbd5e1; } .phase-progress-text { font-size: 0.7rem; font-weight: 600; min-width: 32px; text-align: right; } .phase-progress-text.progress-badge-complete { color: #059669; } .phase-progress-text.progress-badge-good { color: #2563eb; } .phase-progress-text.progress-badge-started { color: #d97706; } .phase-progress-text.progress-badge-pending { color: #94a3b8; } /* Fase fuera de alcance (Skipped / NotApplicable): sin barra ni porcentaje. */ .phase-progress-text--out-of-scope { color: #94a3b8; font-weight: 500; } /* Phase Status Badge */ .phase-status-cell { min-width: 90px; } .phase-status-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .phase-badge-complete { background: #d1fae5; color: #065f46; } .phase-badge-active { background: #dbeafe; color: #1e40af; } .phase-badge-pending { background: #f1f5f9; color: #64748b; } /* --------------------------------------------------------------------------------------------- Story ft.02 — las TRES fechas de la sub-fila de fase, y el replan en la celda. Los dos que vivían aquí (.phase-date-input-v2) se RETIRARON con su regla: mostraban la fecha real bajo encabezado de plan y descartaban lo tecleado. Hoy la línea base y la real se pintan como DATO (no como campo) y la única superficie editable es la fecha viva, que abre el popover de replan. Todo con tokens: cero valores de color en crudo, cero !important (FD-08 mantiene separados los dos diccionarios de semáforo, así que aquí no se usa ninguna paleta de estado). --------------------------------------------------------------------------------------------- */ .phase-date-cell { min-width: 100px; } /* Línea base: referencia atenuada. Es el compromiso congelado, no el titular de la fila. */ .phase-date-cell.is-baseline { color: var(--med-gray-medium); } .phase-baseline-lock { margin-right: 4px; font-size: 0.7rem; } /* Fecha real: la sella el sistema. Atenuada por la misma razón. */ .phase-date-cell.is-actual { color: var(--med-gray-medium); } /* Fecha viva + contador: la pieza central del finalista 1. */ .phase-live-cell { position: relative; white-space: nowrap; } .phase-live-trigger { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 0.72rem; color: var(--med-gray-dark); cursor: pointer; } .phase-live-trigger:hover { border-color: var(--grid-line); background: var(--bg-white); } .phase-live-trigger:focus-visible { outline: 2px solid var(--med-blue-interactive); outline-offset: 1px; } /* El lápiz solo aparece al acercarse: la fila ya carga tres fechas, un candado y un contador. */ .phase-live-pencil { opacity: 0; font-size: 0.65rem; color: var(--med-blue-interactive); } .phase-live-trigger:hover .phase-live-pencil, .phase-live-trigger:focus-visible .phase-live-pencil { opacity: 1; } /* Contador de replanes: SIEMPRE pegado a la fecha viva, nunca columna suelta (FD-07). */ .phase-replan-counter { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 4px; padding: 0 4px; border-radius: 8px; background: var(--med-yellow-bg); color: var(--med-yellow-deep); font-size: 0.62rem; font-weight: var(--font-weight-semibold); } /* ---- Popover de replan: anclado a la celda, no un modal de pantalla completa (FD-03) ---- */ .phase-replan-popover { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: 300px; border: 1px solid var(--med-blue-interactive); border-radius: var(--radius-md); background: var(--bg-white); box-shadow: 0 8px 24px var(--med-gray-lighter); text-align: left; white-space: normal; } .phase-replan-popover .replan-head { padding: 8px 12px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--med-blue-primary); color: var(--bg-white); font-size: 0.75rem; font-weight: var(--font-weight-semibold); } .phase-replan-popover .replan-body { padding: 12px; } .phase-replan-popover .replan-label { display: block; margin-bottom: 4px; color: var(--med-gray-medium); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; } .phase-replan-popover .replan-hint { text-transform: none; letter-spacing: normal; } .phase-replan-popover .replan-required { color: var(--status-error-deep); } .phase-replan-popover .replan-baseline { margin-bottom: 12px; color: var(--med-gray-medium); font-size: 0.75rem; } .phase-replan-popover .replan-input, .phase-replan-popover .replan-textarea { width: 100%; margin-bottom: 10px; padding: 6px 8px; border: 1px solid var(--grid-line); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.78rem; } .phase-replan-popover .replan-textarea { min-height: 54px; resize: vertical; } .phase-replan-popover .replan-count { margin: -6px 0 10px; font-size: 0.65rem; } .phase-replan-popover .replan-count.is-valid { color: var(--status-success-deep); } .phase-replan-popover .replan-count.is-short { color: var(--med-gray-medium); } .phase-replan-popover .replan-error { margin-bottom: 10px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--status-error-bg); color: var(--status-error-deep); font-size: 0.7rem; } .phase-replan-popover .replan-actions { display: flex; justify-content: flex-end; gap: 8px; } /* Phase Comment Input */ .phase-comment-cell { min-width: 180px; } .phase-comment-input { width: 100%; padding: 2px 6px; border: 1px solid #e2e8f0; border-radius: 3px; font-size: 0.7rem; color: #475569; background: white; height: 22px; } .phase-comment-input::placeholder { color: #94a3b8; font-style: italic; } .phase-comment-input:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } /* ===== LEGACY PHASE ROWS (keeping for compatibility) ===== */ .phase-row { background: #fafafa; } .phase-row .frozen { background: #fafafa; } .phase-row .phase-name { padding-left: 24px; color: #666; font-size: 0.8rem; white-space: nowrap; } .phase-row.phase-complete { background: #f0fff4; } .phase-row.phase-complete .frozen { background: #f0fff4; } .phase-row.phase-in-progress { background: #fff8e6; } .phase-row.phase-in-progress .frozen { background: #fff8e6; } .phase-row.phase-pending { background: #fafafa; } /* ===== EXPAND BUTTON ===== */ .expand-btn { background: none; border: none; cursor: pointer; font-size: 0.75rem; color: #666; padding: 4px; border-radius: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .expand-btn:hover { background: #e5e5e5; } /* ===== EDITABLE CELLS ===== */ .cell-editable input, .cell-editable select, .cell-editable textarea { width: 100%; padding: 4px 8px; border: 1px dashed #d4d4d4; border-radius: 4px; background: transparent; font-size: 0.8rem; font-family: inherit; } .cell-editable input:focus, .cell-editable select:focus, .cell-editable textarea:focus { /* UX-DS-05.03b (feedback Ivan) — single focus rectangle. The old `border` + offset `outline` drew TWO concentric rectangles (the outline sits outside the border with a gap); with CB-2 auto-focusing the editor on activate it showed immediately as a "double rectangle". Keep one crisp solid-blue border as the focus affordance (dashed-grey → solid-blue is a clear state change); no separate outline. */ border-color: #1010EB; border-style: solid; outline: none; background: white; } /* UX-DS-05.03b/05.05 (feedback Ivan) — fix the "double rectangle" on the ACTIVE editing cell. DevTools pinned the two frames: the .cell-selected 2px blue inset ring (OUTER) + the editor input's own border (INNER), the latter forced by GLOBAL app-wide rules in create-project-hotfix.css (`input[type=…] { border: 1.5px … !important; padding: 10px 14px !important }` + `input:focus { border-color/box-shadow glow !important; transform: translateY(-1px) }`). WHY specificity alone could never win: since UX-DS-02.03 the hotfix is imported into `@layer overrides` (design-system/index.css) — and for `!important` declarations the layer cascade INVERTS: a layered !important beats ANY unlayered !important regardless of specificity. This file is unlayered, so its previous (0,3,2) !important rule silently lost to the hotfix's (0,1,1). The fix must therefore live INSIDE `@layer overrides` too — same layer, so specificity decides again and (0,3,2) beats (0,1,1). Validated live (Playwright, styleSheets walker + computed styles) on 2026-07-06. Result: the td's blue ring is the single frame; the input fills it borderless, flat and white (the editor auto-focuses on mount, CB-2). Padding reset so the input fits the 32px row; transform/box-shadow reset to kill the hotfix's focus glow + 1px lift. */ @layer overrides { .tracker-table-wrapper td.cell-editable.cell-selected input, .tracker-table-wrapper td.cell-editable.cell-selected select, .tracker-table-wrapper td.cell-editable.cell-selected textarea { border: 0 !important; box-shadow: none !important; outline: none !important; padding: 4px 8px !important; transform: none !important; background: #fff !important; } /*