, 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 ===== */ .tracker-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .tracker-header h1 { font-size: 1.5rem; font-weight: 600; color: var(--med-blue-primary); margin: 0; } .tracker-actions { display: flex; gap: 8px; } /* ===== FILTERS ===== */ .tracker-filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 16px; background: white; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .filter-group { display: flex; flex-direction: column; gap: 4px; } .filter-group label { font-size: 0.75rem; font-weight: 600; color: #666; text-transform: uppercase; } .filter-group select, .filter-group input { padding: 8px 12px; border: 1px solid #d4d4d4; border-radius: 4px; font-size: 0.875rem; min-width: 120px; } /* Variant A: filtro con valor activo resaltado (fondo amarillo + borde azul). */ .filter-group select.has-value, .filter-group input.has-value { background: var(--med-yellow-bg); border-color: var(--med-blue-interactive); } .filter-group.search input { min-width: 200px; } /* ===== PHASE FILTER (current-phase multi-select dropdown; replaces the intake toggle) ===== */ .filter-group.phase-filter { position: relative; } .phase-filter-dd { position: relative; } .phase-filter-dd > summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid #d4d4d4; border-radius: 4px; font-size: 0.875rem; min-width: 120px; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .phase-filter-dd > summary::-webkit-details-marker { display: none; } .phase-filter-dd > summary::after { content: "▾"; color: #666; } .phase-filter-dd.has-value > summary { background: var(--med-yellow-bg); border-color: var(--med-blue-interactive); } .phase-filter-menu { position: absolute; z-index: 30; margin-top: 4px; min-width: 220px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #d4d4d4; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); padding: 6px; } .phase-filter-opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 0.85rem; font-weight: 400; text-transform: none; color: #222; border-radius: 4px; cursor: pointer; white-space: nowrap; } .phase-filter-opt:hover { background: #f2f6fc; } .phase-filter-opt input { min-width: auto; } .phase-filter-all { border-bottom: 1px solid #eee; margin-bottom: 4px; font-weight: 600; } .filter-count { margin-left: auto; font-size: 0.875rem; color: #666; } /* ===== TABLE WRAPPER ===== */ .tracker-table-wrapper { flex: 1; overflow: auto; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 60px; /* Space for unsaved changes bar */ } /* ===== 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); } .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; } .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; } .col-tool { left: 220px; width: 300px; min-width: 300px; max-width: 300px; 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; } /* 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); } /* ===== 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; } .phase-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dot-complete { background: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); } .dot-active { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); animation: pulse 2s infinite; } .dot-pending { background: #cbd5e1; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } 50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); } } .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; } .phase-status-indicator.dot-complete { background: var(--status-success); } .phase-status-indicator.dot-active { background: var(--med-blue-interactive); box-shadow: 0 0 0 0 color-mix(in srgb, var(--med-blue-interactive) 45%, transparent); animation: phasePulse 1.5s ease-in-out infinite; } .phase-status-indicator.dot-pending { background: var(--med-gray-lighter); } @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) */ .phase-name-text { font-weight: 600; color: var(--med-gray-dark); white-space: nowrap; } .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; } .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; } /* 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; } /* Phase Date Inputs */ .phase-date-cell { min-width: 100px; } .phase-date-input-v2 { width: 100%; padding: 2px 4px; border: 1px solid #e2e8f0; border-radius: 3px; font-size: 0.7rem; color: #475569; background: white; height: 22px; } .phase-date-input-v2:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } /* 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; } /*