/*
 * DrawingViewer styles, ported from pid_process/visualize.py:
 *   - Palette from visualize.py:34-56
 *   - Selection / focus / sidebar from visualize.py:596-722
 *
 * Page-level rules for the JobDetail route now live in
 * app/WorkpackPid.Client/Pages/JobDetail.razor.css (scoped CSS).
 */

/* ================== Layout ================== */

/* Fills the .job-detail-page__viewer pane via flex; the grid then splits sidebar / canvas. */
.drawing-viewer {
    display: grid;
    grid-template-columns: 360px 1fr;
    height: 100%;
    min-height: 0;
    background: #fafafa;
    color: #222;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

.drawing-viewer__sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;            /* allow inner flex child to overflow */
    border-right: 1px solid #e5e5e5;
    background: #fff;
    overflow: hidden;
}

/*
 * Top of the sidebar: search box, focus indicator, type chips.
 * Stays pinned while the entity list below scrolls — matches visualize.py.
 */
.sidebar__header {
    flex: 0 0 auto;
    padding: 12px 12px 8px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

/* The scrolling list pane. */
.sidebar__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 12px;
}

.drawing-viewer__canvas {
    overflow: auto;
    background: #f3f3f3;
}

.drawing-viewer__svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ================== Sidebar ================== */

.sidebar__search {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.sidebar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}

/*
 * Type-filter chip. Filled blue with white text when active; outlined-grey
 * with strikethrough when toggled off. Mirrors visualize.py:596-722.
 */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #1f77b4;
    border-radius: 14px;
    background: #1f77b4;
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
    transition: background 0.1s, border-color 0.1s, color 0.1s, opacity 0.1s;
}

.chip:hover {
    background: #195e91;
    border-color: #195e91;
}

.chip--off {
    background: #fff;
    color: #666;
    border-color: #ccc;
    opacity: 0.7;
    text-decoration: line-through;
}

.chip--off:hover {
    background: #f5f5f5;
    border-color: #aaa;
    color: #444;
}

.chip__swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    flex: 0 0 auto;
}

.chip--off .chip__swatch {
    border-color: #888;
}

.chip__label { white-space: nowrap; }

.chip__count {
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 0 6px;
    line-height: 1.55;
}

.chip--off .chip__count {
    background: #eee;
    color: #555;
}

/*
 * Focus details panel — shown below the chip row when an entity is selected.
 * Header band (amber) shows entity title + type; field list (lighter amber)
 * shows entity-specific key/value rows. Same amber accent as the SVG
 * highlight so the link between the panel and the glowing entity is obvious.
 */
.focus-details {
    margin-top: 8px;
    background: #fffbe1;
    border: 1px solid #f0b300;
    border-left: 4px solid #f0b300;
    border-radius: 4px;
    overflow: hidden;
}

.focus-details__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff3b8;
    border-bottom: 1px solid #f0b300;
}

.focus-details__icon {
    color: #b87a00;
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
}

.focus-details__title {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.focus-details__primary {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.focus-details__type {
    color: #6b4f00;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.focus-details__close {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #6b4f00;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    border-radius: 3px;
}

.focus-details__close:hover {
    background: rgba(184, 122, 0, 0.15);
}

.focus-details__fields {
    margin: 0;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: minmax(70px, auto) 1fr;
    gap: 4px 10px;
    font-size: 11.5px;
    align-items: baseline;
}

.focus-details__fields dt {
    color: #6b4f00;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
}

.focus-details__fields dd {
    margin: 0;
    color: #1a1a1a;
    word-break: break-word;
}

/* Fallback "raw id only" banner used when an entity id has an unknown prefix. */
.focus-details--unknown {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff3b8;
    color: #5a4400;
    font-size: 12.5px;
}

/*
 * Group heading band (e.g. "EQUIPMENT TAGS (16)"). Sticky inside the scrolling
 * list pane so the user always knows which group they're scrolled into.
 */
.sidebar__group-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f5f6f8;
    color: #4a4a4a;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    padding: 6px 8px;
    margin: 12px -4px 4px;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar__group-heading:first-child { margin-top: 0; }

.sidebar__group-heading--layers {
    background: #f0f4f9;
    margin-top: 18px;
}

/*
 * Entity row. Bold title + muted sub on the first line, optional secondary
 * detail below. Bottom border separates entries.
 */
.entity-list-item {
    padding: 6px 8px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.08s;
}

.entity-list-item:hover {
    background: #f1f5fb;
}

.entity-list-item.is-active {
    background: #fff8d4;
    border-left-color: #f0b300;
}

.entity-list-item__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.entity-list-item__title {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 13px;
}

.entity-list-item.is-active .entity-list-item__title {
    color: #5a4400;
}

.entity-list-item__sub {
    color: #888;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.entity-list-item__detail {
    color: #999;
    font-size: 11.5px;
    margin-top: 2px;
    line-height: 1.35;
    word-break: break-word;
}

.entity-list-item__warn-icon {
    margin-left: auto;
}

/* ================== Layer visibility panel ================== */

.layer-panel {
    flex: 0 0 auto;
    border-top: 1px solid #e5e5e5;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/*
 * When expanded, claim ~55% of the sidebar height directly via flex-basis.
 * Using a hard basis instead of max-height stops the entity list (whose
 * auto basis is huge — the sum of every row's natural height) from
 * crowding the panel down to a sliver.
 */
.layer-panel.is-expanded {
    flex: 0 0 55%;
}

.layer-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: #f0f2f5;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    width: 100%;
    text-align: left;
    flex: 0 0 auto;
}

.layer-panel__header:hover { background: #e7eaef; }

.layer-panel__caret {
    font-size: 10px;
    color: #666;
    width: 10px;
    display: inline-block;
}

.layer-panel__actions {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    background: #fafafa;
    border-bottom: 1px solid #e5e5e5;
    flex: 0 0 auto;
}

.layer-panel__body {
    overflow-y: auto;
    padding: 8px 10px 10px;
    flex: 1 1 auto;
    min-height: 0;
}

.layer-panel__btn {
    flex: 1 1 0;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
}

.layer-panel__btn:hover { background: #f0f0f0; border-color: #aaa; }

.layer-panel__group {
    margin: 0 0 10px;
    padding: 6px 8px 4px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
}

.layer-panel__group legend {
    padding: 0 4px;
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ================== Layer toggle row (used by panel + special) ================== */

.layer-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
    color: #333;
    cursor: pointer;
}

.layer-toggle input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
}

.layer-toggle__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    flex: 0 0 auto;
}

.layer-toggle__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-toggle__count {
    flex: 0 0 auto;
    color: #888;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    min-width: 24px;
    text-align: right;
}

/* ================== SVG palette ================== */
/* Symbols by category — fill is light, stroke encodes category. */

.svg-symbol--equipment      { fill: rgba(31,119,180,0.05);  stroke: #1f77b4; stroke-width: 0.6; }
.svg-symbol--instrument     { fill: rgba(228,26,28,0.05);   stroke: #e41a1c; stroke-width: 0.6; }
.svg-symbol--valve          { fill: rgba(255,127,14,0.05);  stroke: #ff7f0e; stroke-width: 0.6; }
.svg-symbol--fitting        { fill: rgba(44,160,44,0.05);   stroke: #2ca02c; stroke-width: 0.6; }
.svg-symbol--title_block    { fill: none;                    stroke: #555;    stroke-width: 0.4; }
.svg-symbol--unclassified   { fill: none;                    stroke: #888;    stroke-width: 0.4;
                              stroke-dasharray: 1.5 1.0; }

/* Line runs */
.svg-line-run--tagged       { stroke: #9467bd; stroke-width: 1.0; fill: none; }
.svg-line-run--untagged     { stroke: #bcbcbc; stroke-width: 0.3; fill: none; }

/* Texts */
.svg-text-marker            { fill: #444; stroke: none; }
.svg-text-marker--orphan    { fill: #fff; stroke: #d62728; stroke-width: 0.4; }

/* Per text classification (extend palette as needed) */
.svg-text--line_spec        { fill: #1f77b4; }
.svg-text--equipment_tag    { fill: #2ca02c; }
.svg-text--balloon_number   { fill: #e41a1c; }
.svg-text--stream_code      { fill: #8c564b; }

/* Instrument tags */
.svg-instrument-circle      { stroke: #e41a1c; fill: rgba(228,26,28,0.05); stroke-width: 0.5; }
.svg-instrument-label       { fill: #e41a1c; font-weight: 700; font-size: 2px; }

/* Hold annotations */
.svg-hold-marker            { fill: #d62728; stroke: #fff; stroke-width: 0.3; }
.svg-hold-label             { fill: #d62728; font-weight: 700; font-size: 2px; }

/* Region labels */
.svg-region-label           { fill: #1f77b4; font-weight: 700; font-size: 2.5px; }

/* Cross-references */
.svg-xref-label             { fill: #8c564b; font-style: italic; font-size: 2px; }

/* ================== Selection / focus ================== */

/*
 * Selected-entity highlight. Has to work for three different SVG shapes:
 *   - <rect> (symbols)
 *   - <polyline> (line runs)
 *   - <g> wrapper (instruments / holds / regions / cross-refs / annotation groups)
 * Drop-shadow gives a halo at any zoom; the per-shape rules below force a strong
 * yellow stroke that wins against the per-category palette via !important.
 */
.is-highlighted {
    filter: drop-shadow(0 0 3px #f0b300) drop-shadow(0 0 6px rgba(240,179,0,0.75));
}

rect.is-highlighted,
polyline.is-highlighted,
circle.is-highlighted {
    stroke: #f0b300 !important;
    stroke-width: 1.6 !important;
}

rect.is-highlighted {
    fill: rgba(240, 179, 0, 0.25) !important;
}

/* For wrapped <g> entities (instrument tags, hold annotations, region labels, cross-refs). */
.is-highlighted .svg-instrument-circle,
.is-highlighted .svg-hold-marker,
.is-highlighted .svg-text-marker {
    stroke: #f0b300 !important;
    stroke-width: 1.5 !important;
}

.is-highlighted .svg-instrument-label,
.is-highlighted .svg-hold-label,
.is-highlighted .svg-region-label,
.is-highlighted .svg-xref-label {
    fill: #6b4f00 !important;
    font-weight: 800 !important;
}

/* Hidden by user (chip / layer toggle off) */
.is-hidden {
    display: none;
}

/* Search-filtered out (sidebar list) */
.is-search-hidden {
    display: none;
}

/*
 * Focus mode: hide every overlay entity inside .svg-layer groups except the one
 * that's selected. The base drawing PNG is rendered as a direct child of <svg>
 * (outside any .svg-layer group) so it remains visible — matching visualize.py
 * where the cropped PNG is the visual context and the overlays are interaction
 * targets. Press Esc (or click the selected entity again) to restore.
 */
.drawing-viewer.is-focus .svg-layer > *:not(.is-highlighted) {
    display: none;
}

/* Search-filtered out (sidebar list) */
.is-search-hidden {
    display: none;
}

/* ================== Selection bar ================== */

.selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: #fff8d4;
    border: 1px solid #f0b300;
    border-radius: 4px;
    margin-bottom: 8px;
}

.selection-bar__close {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    font-size: 14px;
}

/* Pages-list and upload-dropzone rules removed — those styles now live in:
 *   - app/WorkpackPid.Client/Pages/Jobs.razor.css           (drop zone)
 *   - app/WorkpackPid.Client/Components/Jobs/JobsTable.razor.css
 *   - app/WorkpackPid.Client/Components/Status/StatusPill.razor.css
 * See specs/002-ui-restyle-queue/research.md §12.
 */