:root {
  --navy: #0b2239;
  --navy-2: #123552;
  --teal: #00a89c;
  --teal-dark: #007d75;
  --cyan: #38bdf8;
  --yellow: #f7c948;
  --red: #dc4c4c;
  --orange: #e9902a;
  --green: #168a62;
  --ink: #172433;
  --muted: #647386;
  --line: #d9e1e8;
  --line-soft: #eaf0f4;
  --surface: #ffffff;
  --background: #f3f6f8;
  --label-width: 310px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--background);
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; background: var(--background); }
button, input, select { font: inherit; }
a { color: inherit; }
.topbar { min-height: 70px; padding: 0 2rem; display: grid; grid-template-columns: minmax(235px, 1fr) auto 1fr; align-items: center; gap: 1.5rem; color: white; background: var(--navy); border-bottom: 3px solid var(--teal); }
.brand { display: inline-flex; width: fit-content; align-items: center; gap: .7rem; color: white; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--teal); color: var(--teal); font-weight: 850; letter-spacing: -.03em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .96rem; }
.brand small { margin-top: .1rem; color: #a9bdcc; font-size: .74rem; }
.main-nav { align-self: stretch; display: flex; align-items: stretch; }
.main-nav a { display: flex; align-items: center; padding: 0 1.15rem; color: #c4d1db; font-size: .9rem; font-weight: 650; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -3px; }
.main-nav a:hover, .main-nav a.active { color: #fff; background: rgba(255,255,255,.05); border-bottom-color: var(--yellow); }
.version { justify-self: end; padding: .3rem .55rem; font-size: .72rem; font-weight: 800; color: var(--navy); background: var(--yellow); border-radius: 3px; }
.workspace { max-width: 1600px; margin: 0 auto; padding: 2rem; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.35rem; }
.page-heading h1, .placeholder-card h1 { margin: .15rem 0 .25rem; color: var(--navy); font-size: clamp(1.75rem, 3vw, 2.45rem); letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--muted); }
.eyebrow { margin: 0; color: var(--teal-dark) !important; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.cutoff-card { min-width: 220px; padding: .8rem 1rem; background: var(--navy); color: white; border-left: 4px solid var(--yellow); }
.cutoff-card span, .cutoff-card strong { display: block; }
.cutoff-card span { color: #b6c7d4; font-size: .75rem; }
.cutoff-card strong { margin-top: .15rem; font-size: 1.05rem; }
.text-button { padding: .35rem 0 0; color: var(--yellow); background: transparent; border: 0; cursor: pointer; font-size: .76rem; font-weight: 700; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric { position: relative; min-height: 112px; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.metric::after { content: ""; position: absolute; width: 54px; height: 4px; right: 0; top: 0; background: var(--teal); }
.metric-primary { color: white; background: var(--navy-2); border-color: var(--navy-2); }
.metric-primary::after { width: 100%; background: var(--yellow); }
.metric span, .metric small, .metric strong { display: block; }
.metric span { font-size: .78rem; font-weight: 700; color: var(--muted); }
.metric-primary span, .metric-primary small { color: #bfd0db; }
.metric strong { margin: .35rem 0 .15rem; font-size: 1.55rem; letter-spacing: -.04em; }
.metric small { color: var(--muted); font-size: .74rem; }
.program-card { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(18,53,82,.06); }
.toolbar { padding: 1rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.filters { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; }
.filters label { display: grid; gap: .35rem; }
.filters label > span { color: var(--muted); font-size: .72rem; font-weight: 750; }
select, input { min-height: 40px; padding: .55rem .7rem; color: var(--ink); background: white; border: 1px solid #c7d1d9; border-radius: 3px; outline: none; }
select:focus, input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,168,156,.13); }
.search-field input { width: min(280px, 65vw); }
.scale-control { display: flex; padding: 3px; background: var(--background); border: 1px solid var(--line); border-radius: 4px; }
.scale-control button { min-height: 34px; padding: 0 .75rem; color: var(--muted); background: transparent; border: 0; border-radius: 2px; cursor: pointer; font-size: .78rem; font-weight: 750; }
.scale-control button.active { color: white; background: var(--navy-2); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; padding: .7rem 1rem; color: var(--muted); border-bottom: 1px solid var(--line-soft); font-size: .74rem; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #a9b4be; }
.dot.completed { background: var(--green); }.dot.ontrack { background: var(--cyan); }.dot.risk { background: var(--orange); }.dot.delayed { background: var(--red); }.dot.unreported { background: #8b98a5; }
.state-message { padding: 3.5rem 1rem; text-align: center; color: var(--muted); }
.state-message.error { color: #a12626; background: #fff6f6; }
.gantt-shell { max-height: 650px; overflow: auto; position: relative; }
.gantt { min-width: 980px; position: relative; }
.gantt-header { position: sticky; top: 0; z-index: 6; display: grid; background: white; border-bottom: 1px solid var(--line); }
.gantt-corner { position: sticky; left: 0; z-index: 8; display: flex; align-items: end; padding: .75rem 1rem; color: var(--muted); background: white; border-right: 1px solid var(--line); box-shadow: 6px 0 12px rgba(18,53,82,.06); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.timeline-header { position: relative; height: 64px; background: linear-gradient(to right, transparent calc(100% - 1px), #edf1f4 calc(100% - 1px)); }
.timeline-tick { position: absolute; inset-block: 0; border-left: 1px solid #dfe6eb; }
.timeline-tick span { position: absolute; top: .75rem; left: .45rem; white-space: nowrap; color: var(--navy-2); font-size: .72rem; font-weight: 800; }
.timeline-tick small { position: absolute; top: 2rem; left: .45rem; white-space: nowrap; color: var(--muted); font-size: .66rem; }
.gantt-group { display: grid; min-height: 38px; background: #e8f0f4; border-bottom: 1px solid #d1dce3; }
.group-label { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; gap: .55rem; padding: .55rem 1rem; color: var(--navy); background: #e8f0f4; border-right: 1px solid #d1dce3; box-shadow: 6px 0 12px rgba(18,53,82,.06); font-size: .82rem; font-weight: 850; }
.group-count { color: var(--muted); font-size: .68rem; font-weight: 650; }
.gantt-row { display: grid; min-height: 49px; border-bottom: 1px solid var(--line-soft); }
.row-label { position: sticky; left: 0; z-index: 3; padding: .55rem 1rem; background: #fff; border-right: 1px solid var(--line); box-shadow: 6px 0 12px rgba(18,53,82,.06); overflow: hidden; }
.row-label strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: .78rem; }
.row-label small { display: block; margin-top: .18rem; color: var(--muted); font-size: .66rem; }
.row-track { position: relative; background-color: white; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--grid-size) - 1px), #edf1f4 calc(var(--grid-size) - 1px), #edf1f4 var(--grid-size)); }
.bar { position: absolute; top: 11px; min-width: 3px; height: 26px; padding: 0 .45rem; display: flex; align-items: center; border: 0; border-radius: 3px; color: white; background: #8b98a5; cursor: pointer; overflow: hidden; box-shadow: 0 2px 5px rgba(10,34,55,.18); }
.bar:hover, .bar:focus { outline: 2px solid var(--yellow); outline-offset: 2px; z-index: 2; }
.bar.completed { background: var(--green); }.bar.ontrack { background: #168dbd; }.bar.risk { background: var(--orange); }.bar.delayed { background: var(--red); }.bar.notstarted { color: #526171; background: #e4e9ed; border: 1px solid #aeb9c2; }.bar.unreported { background: repeating-linear-gradient(135deg,#70808e,#70808e 8px,#82909c 8px,#82909c 16px); }
.bar-progress { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.22); pointer-events: none; }
.bar-text { position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .66rem; font-weight: 800; }
.today-line { position: absolute; top: 0; bottom: 0; width: 2px; z-index: 5; background: #ef4444; pointer-events: none; }
.today-line span { position: sticky; top: 2px; display: block; width: max-content; transform: translateX(-50%); padding: .22rem .4rem; color: white; background: #ef4444; border-radius: 2px; font-size: .62rem; font-weight: 900; letter-spacing: .03em; }
.detail-panel { position: fixed; z-index: 20; inset: 0 0 0 auto; width: min(430px, 92vw); padding: 2rem; color: white; background: var(--navy); transform: translateX(102%); transition: transform .2s ease; box-shadow: -20px 0 45px rgba(0,0,0,.18); }
.detail-panel.open { transform: translateX(0); }
.detail-panel h2 { margin: .35rem 2.5rem 1.5rem 0; font-size: 1.45rem; line-height: 1.25; }
.detail-panel dl { margin: 0; }
.detail-panel dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.detail-panel dt { color: #a9bdcc; font-size: .82rem; }.detail-panel dd { margin: 0; font-weight: 750; text-align: right; }
.close-button { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; color: white; background: rgba(255,255,255,.08); border: 0; border-radius: 50%; font-size: 1.5rem; cursor: pointer; }
.detail-note { margin-top: 1.5rem; padding: 1rem; color: #c7d5df; background: rgba(255,255,255,.07); font-size: .78rem; line-height: 1.55; }
.status-pill { display: inline-block; padding: .25rem .5rem; color: white; background: #71808d; border-radius: 999px; font-size: .72rem; }
.panel-backdrop { position: fixed; z-index: 19; inset: 0; background: rgba(5,20,33,.45); }
.placeholder-page { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 2rem; }
.placeholder-card { max-width: 560px; padding: 3rem; text-align: center; background: white; border: 1px solid var(--line); border-top: 5px solid var(--teal); box-shadow: 0 18px 50px rgba(18,53,82,.09); }
.placeholder-card p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }
.placeholder-icon { width: 64px; height: 64px; margin: 0 auto 1.25rem; display: grid; place-items: center; color: var(--teal); background: #e5f7f5; border-radius: 50%; font-size: 1.8rem; }
.primary-button { display: inline-block; margin-top: .8rem; padding: .75rem 1rem; color: white; background: var(--navy); border-left: 4px solid var(--yellow); text-decoration: none; font-weight: 750; }
.capture-workspace { max-width: 1180px; margin: 0 auto; padding: 2rem; }
.capture-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.capture-heading h1 { margin: .15rem 0 .25rem; color: var(--navy); font-size: clamp(1.75rem,3vw,2.45rem); letter-spacing: -.035em; }
.capture-heading p { margin: 0; color: var(--muted); }
.connection-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .75rem; color: #25614e; background: #e5f5ef; border: 1px solid #b8dfd0; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.connection-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.connection-badge.loading { color: var(--muted); background: white; border-color: var(--line); }.connection-badge.loading i { background: var(--yellow); }
.connection-badge.error { color: #9d2d2d; background: #fff0f0; border-color: #efc2c2; }.connection-badge.error i { background: var(--red); }
.capture-form { display: grid; gap: 1rem; }
.form-section { display: grid; grid-template-columns: 64px 1fr; background: white; border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(18,53,82,.04); }
.section-number { padding-top: 1.45rem; color: var(--teal); background: var(--navy); text-align: center; font-size: .82rem; font-weight: 900; letter-spacing: .08em; }
.section-content { min-width: 0; padding: 1.4rem; }
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.section-heading h2 { margin: 0 0 .25rem; color: var(--navy); font-size: 1.12rem; }
.section-heading p { margin: 0; color: var(--muted); font-size: .82rem; }
.field-grid { display: grid; gap: 1rem; }.two-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.field-grid label, .tramo-row label, .stock-grid label, .full-field { display: grid; gap: .4rem; }
.field-grid label > span, .tramo-row label > span, .stock-grid label > span, .full-field > span { color: var(--muted); font-size: .75rem; font-weight: 750; }
textarea { width: 100%; padding: .7rem; color: var(--ink); background: white; border: 1px solid #c7d1d9; border-radius: 3px; font: inherit; resize: vertical; outline: none; }
textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,168,156,.13); }
.secondary-button { min-height: 38px; padding: .5rem .75rem; color: var(--navy); background: white; border: 1px solid #aebbc5; border-radius: 3px; cursor: pointer; font-size: .78rem; font-weight: 800; }
.secondary-button:hover { color: white; background: var(--navy); }
.tramo-grid { display: grid; grid-template-columns: minmax(210px,2fr) minmax(120px,1fr) minmax(120px,1fr) 36px; gap: .75rem; align-items: end; }
.table-head { padding: 0 0 .45rem; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.dynamic-rows { display: grid; gap: .65rem; margin-top: .65rem; }
.tramo-row { padding-bottom: .65rem; border-bottom: 1px solid var(--line-soft); }
.mobile-label { display: none; }
.remove-row { width: 36px; height: 40px; color: #9d2d2d; background: #fff3f3; border: 1px solid #f0cccc; border-radius: 3px; cursor: pointer; font-size: 1.2rem; }
.inline-note { margin: .8rem 0 0; color: var(--muted); font-size: .78rem; }
.progress-input-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.progress-field { padding: .75rem; background: var(--background); border: 1px solid var(--line); }
.progress-field label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.progress-field strong { color: var(--navy); font-size: .86rem; }
.percent-input { display: flex; align-items: center; gap: .2rem; color: var(--muted); font-weight: 800; }
.percent-input input { width: 76px; min-height: 38px; text-align: right; background: white; }
.last-value { display: block; min-height: 1em; margin-top: .35rem; color: var(--muted); font-size: .66rem; }
.stock-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.1fr; align-items: end; gap: .75rem; }
.math-symbol { padding-bottom: .62rem; color: var(--teal-dark); font-size: 1.35rem; font-weight: 900; }
.stock-result { min-height: 63px; padding: .65rem .85rem; color: white; background: var(--navy-2); border-top: 3px solid var(--yellow); }
.stock-result span, .stock-result strong { display: block; }.stock-result span { color: #bcd0dc; font-size: .7rem; }.stock-result strong { margin-top: .15rem; font-size: 1.35rem; }
.full-field { margin-top: 1rem; }
.submit-bar { position: sticky; bottom: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; color: white; background: var(--navy); border-top: 3px solid var(--teal); box-shadow: 0 -8px 24px rgba(11,34,57,.14); }
.submit-bar p { margin: 0; }.submit-bar p strong, .submit-bar p span { display: block; }.submit-bar p strong { font-size: .84rem; }.submit-bar p span { margin-top: .15rem; color: #adc1ce; font-size: .72rem; }
.submit-button { min-height: 44px; padding: .7rem 1.1rem; color: var(--navy); background: var(--yellow); border: 0; border-radius: 3px; cursor: pointer; font-weight: 900; }
.submit-button:disabled { cursor: not-allowed; opacity: .5; }
.form-message { margin-bottom: 1rem; padding: 1rem; color: #215c49; background: #e5f5ef; border-left: 4px solid var(--green); font-weight: 700; }
.form-message.error { color: #922929; background: #fff0f0; border-left-color: var(--red); }
@media (max-width: 900px) {
  .topbar { padding: .75rem 1rem 0; grid-template-columns: 1fr auto; gap: .65rem; }
  .main-nav { grid-column: 1 / -1; order: 3; overflow-x: auto; }
  .main-nav a { min-height: 44px; padding: 0 .8rem; white-space: nowrap; }
  .workspace { padding: 1rem; }
  .page-heading { align-items: stretch; flex-direction: column; gap: 1rem; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .toolbar { align-items: stretch; flex-direction: column; }
  .scale-control { align-self: flex-start; }
  .capture-workspace { padding: 1rem; }
  .two-columns { grid-template-columns: 1fr 1fr; }
  .progress-input-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stock-grid { grid-template-columns: 1fr auto 1fr; }
  .stock-result { grid-column: 1 / -1; }.stock-grid .math-symbol:nth-of-type(3) { display: none; }
}
@media (max-width: 560px) {
  :root { --label-width: 230px; }
  .metrics { grid-template-columns: 1fr; }
  .metric { min-height: 96px; }
  .filters, .filters label, .filters select, .search-field, .search-field input { width: 100%; }
  .placeholder-card { padding: 2rem 1.25rem; }
  .capture-heading { align-items: start; flex-direction: column; }
  .form-section { grid-template-columns: 42px 1fr; }.section-content { padding: 1rem; }.section-number { padding-top: 1.15rem; font-size: .72rem; }
  .two-columns, .progress-input-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: stretch; flex-direction: column; }.secondary-button { width: 100%; }
  .table-head { display: none; }.tramo-grid { grid-template-columns: 1fr 1fr 36px; padding: .75rem; background: var(--background); }.tramo-row label:first-child { grid-column: 1 / -1; }.mobile-label { display: block; }
  .stock-grid { grid-template-columns: 1fr; }.math-symbol { display: none; }.stock-result { grid-column: auto; }
  .submit-bar { align-items: stretch; flex-direction: column; }.submit-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .detail-panel { transition: none; } }