/* PC uses the same surfaces, spacing and Gantt treatment as DPS configuration. */
.block-layout-page {
    --block-bg-1: #f5f9ff; --block-bg-2: #e6f1ff; --block-bg-3: #dbe8fb;
    --block-surface: rgba(255,255,255,.88); --block-surface-strong: rgba(255,255,255,.98);
    --block-shadow: 0 22px 52px rgba(27,54,83,.12); --block-shadow-soft: 0 10px 24px rgba(36,68,102,.08);
    background: radial-gradient(circle at top left,rgba(11,106,176,.16),transparent 26%),
        radial-gradient(circle at 86% 10%,rgba(23,127,103,.13),transparent 20%),
        radial-gradient(circle at 50% 100%,rgba(192,113,33,.08),transparent 24%),
        linear-gradient(160deg,var(--block-bg-1) 0%,var(--block-bg-2) 48%,var(--block-bg-3) 100%);
}
.block-layout-page .card { border-radius: 24px; background: var(--block-surface); box-shadow: var(--block-shadow); backdrop-filter: blur(6px); }
.block-layout-page .pc-plan-hero { overflow: hidden; }
.block-layout-page .card-header { border-radius: 24px 24px 0 0; background: linear-gradient(135deg,rgba(255,255,255,.98),rgba(235,245,255,.92)); }
.block-layout-page .pc-plan-hero-head { padding: 26px 28px 14px; gap: 16px; }
.block-layout-page .pc-plan-title { font-size: 21px; font-weight: 800; letter-spacing: .01em; }
.pc-plan-eyebrow { display: inline-flex; margin-top: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(11,106,176,.08); border: 1px solid rgba(11,106,176,.16); color: #0b6ab0; font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.block-layout-page .pc-plan-hero > .card-body { padding: 22px 28px 28px; }
.block-layout-control { align-items: end; gap: 14px; }
.pc-plan-file-field { display: flex; flex-direction: column; gap: 6px; min-width: 280px; width: 360px; max-width: 100%; padding: 14px; border-radius: 18px; border: 1px solid rgba(107,141,177,.16); background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,250,255,.88)); box-shadow: var(--block-shadow-soft); }
.pc-plan-file-field label { color: #21415d; font-size: 12px; font-weight: 700; }
.pc-plan-diagnostic { margin-top: 20px; padding: 16px; border: 1px solid #e4b977; border-radius: 12px; background: #fffaf1; color: #64481f; }
.pc-plan-diagnostic[hidden] { display: none; }
.pc-plan-diagnostic h6 { font-size: 14px; font-weight: 700; }
.pc-plan-diagnostic p, .pc-plan-diagnostic small { font-size: 12px; line-height: 1.6; }
.pc-plan-diagnostic-table { overflow-x: auto; margin: 12px 0; }
.pc-plan-diagnostic table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.pc-plan-diagnostic th, .pc-plan-diagnostic td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #ead7b9; }
.pc-plan-diagnostic-cumulative { display: block; color: #8a6b3c; }
.block-layout-page .form-control { border-radius: 10px; font-size: 12px; }
.block-layout-page .btn { border-radius: 10px; min-height: 38px; padding: 8px 16px; font-size: 12px; font-weight: 600; }
.block-layout-page .btn-primary { background: linear-gradient(135deg,#0b6ab0,#1b77c2); border-color: #0b6ab0; }
.block-layout-metric { border-radius: 16px; background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,250,255,.94)); padding: 16px; }
.block-layout-metric-value { color: #10263b; font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-plan-metric-note { color: #58718d; font-size: 11px; line-height: 1.6; }
.block-layout-stage-label { border-radius: 999px; }
.pc-plan-stage-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.pc-plan-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-plan-legend > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(248,251,255,.92); border: 1px solid rgba(107,141,177,.16); color: #45607d; font-size: 12px; font-weight: 600; }
.pc-legend-dot { width: 12px; height: 12px; display: inline-block; border-radius: 4px; }
.pc-legend-production { background: #1b8f72; }
.pc-legend-cap { background: rgba(139,186,233,.6); border: 1px solid rgba(45,107,172,.82); }
.pc-plan-legend > span[hidden] { display: none; }
.pc-plan-gantt-shell { position: relative; border-radius: 16px; border: 1px solid var(--block-border); background: linear-gradient(180deg,rgba(252,254,255,.98),rgba(244,249,255,.95)); padding: 6px; min-height: 380px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
#blockLayoutGantt { background: transparent; border: none; border-radius: 10px; }
#blockLayoutGantt .vis-timeline { border: none; background: transparent; }
#blockLayoutGantt .vis-labelset .vis-label { background: rgba(242,247,252,.94); }
#blockLayoutGantt .vis-item.gantt-item { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(116,153,192,.16),0 6px 14px rgba(38,62,91,.10); }
/* Vis positions grouped backgrounds using absolute row offsets. Clipping each
   background container hides covers on subsequent rows. Clip at itemset only. */
#blockLayoutGantt .vis-itemset .vis-background { overflow: visible; }
#blockLayoutGantt .vis-item.vis-background.slot-cap-bg {
    background: repeating-linear-gradient(135deg,rgba(105,167,232,.30) 0px,rgba(105,167,232,.30) 9px,rgba(83,149,218,.18) 9px,rgba(83,149,218,.18) 18px) !important;
    border-left: 2px solid rgba(45,107,172,.82) !important; border-right: 2px solid rgba(45,107,172,.82) !important;
    border-top: 1px dashed rgba(45,107,172,.58) !important; border-bottom: 1px dashed rgba(45,107,172,.58) !important;
    /* Keep the pixel height assigned by Vis for this row, rather than 100%. */
    border-radius: 10px !important; box-shadow: none !important; pointer-events: none;
}
#blockLayoutGantt .vis-item.vis-background.slot-cap-bg .vis-item-content {
    position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
    transform: none !important; color: #164d83; font-size: 11px; font-weight: 700;
    display: block; overflow: hidden; white-space: nowrap;
}
/* Vis sanitizes class attributes in supplied HTML, so style the two spans by
   position rather than relying on their classes surviving that sanitizer. */
#blockLayoutGantt .slot-cap-bg .vis-item-content > span {
    position: absolute; left: 5px; right: 5px; height: 20px; line-height: 20px;
    padding: 0 4px; border-radius: 3px; background: rgba(235,246,255,.95);
    overflow: hidden; text-overflow: ellipsis; pointer-events: auto;
}
#blockLayoutGantt .slot-cap-bg .vis-item-content > span:first-child { top: 5px; }
#blockLayoutGantt .slot-cap-bg .vis-item-content > span:last-child { bottom: 5px; }
@media (max-width: 768px) {
    .block-layout-page .pc-plan-hero-head { padding: 18px 16px 12px; }
    .block-layout-page .card-body, .block-layout-page .pc-plan-hero > .card-body { padding: 14px; }
    .block-layout-page .card { border-radius: 18px; }
    .pc-plan-file-field { width: 100%; min-width: 0; }
    .block-layout-control .btn { flex: 1; }
}