:root { --bg:#f7f8fc; --surface:#fff; --border:#e6e9f0; --text:#0f172a; --muted:#64748b; --accent:#f59e0b; }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); }
    .layout { min-height: 100vh; display:grid; grid-template-columns:260px 1fr; transition:grid-template-columns .2s ease; }
    .layout.collapsed { grid-template-columns:72px 1fr; }
    .sidebar { background:var(--surface); border-right:1px solid var(--border); padding:12px 10px; overflow:hidden; }
    .brand { display:flex; align-items:center; justify-content:space-between; margin:0 4px 12px; }
    .brand-text { font-size:13px; font-weight:700; letter-spacing:.8px; color:#0b1324; }
    .toggle { border:1px solid #cbd5e1; background:#fff; border-radius:8px; width:30px; height:30px; cursor:pointer; }
    .section-title { margin:10px 6px 6px; font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:.8px; }
    .menu-item { display:flex; align-items:center; gap:8px; text-decoration:none; color:#1f2937; padding:8px; border-radius:10px; border:1px solid transparent; font-size:13px; white-space:nowrap; }
    .menu-item:hover { background:#f8fafc; border-color:#dbe2ea; }
    .menu-item.active { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; font-weight:600; }
    .icon { width:16px; height:16px; flex:0 0 16px; }
    .icon svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
    .layout.collapsed .brand-text, .layout.collapsed .section-title, .layout.collapsed .label { display:none; }
    .content { padding:12px; }
    .panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; height:calc(100vh - 24px); display:flex; flex-direction:column; }
    .topbar { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
    h1 { margin:0; font-size:22px; }
    .sub { margin:4px 0 0; color:var(--muted); font-size:13px; }
    .actions { display:flex; gap:8px; flex-wrap:wrap; }
    .btn { border:1px solid #cbd5e1; background:#fff; border-radius:8px; padding:7px 10px; font-size:13px; cursor:pointer; }
    .btn.primary { background:var(--accent); border-color:#d97706; color:#fff; }
    .btn.danger { background:#ef4444; border-color:#dc2626; color:#fff; }
    .btn:disabled { opacity:.45; cursor:not-allowed; }
    .search-input { border:1px solid #cbd5e1; border-radius:8px; padding:7px 10px; font-size:13px; width:200px; }
    .search-input:focus { outline:none; border-color:#f59e0b; box-shadow:0 0 0 2px rgba(249,158,11,.2); }
    th.sortable { cursor:pointer; user-select:none; }
    th.sortable:hover { background:#e2e8f0; }
    th.sortable span { display:inline-flex; align-items:center; gap:4px; }
    th.sortable span::after { content:'↕'; opacity:.3; font-size:10px; }
    th.sort-asc span::after { content:'↑'; opacity:1; color:#f59e0b; }
    th.sort-desc span::after { content:'↓'; opacity:1; color:#f59e0b; }
    .table-wrap { flex:1; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:10px; background:#fff; }
    table { width:100%; border-collapse:collapse; }
    th, td { border-bottom:1px solid var(--border); text-align:left; padding:8px 7px; font-size:13px; }
    th { color:#334155; background:#f8fafc; font-weight:600; position:sticky; top:0; z-index:1; }
    tr.group-header td { background:#f1f5f9; font-weight:600; font-size:13px; color:#1e293b; cursor:pointer; user-select:none; }
    tr.group-header td:hover { background:#e2e8f0; }
    tr.group-header-stk td { background:#dbeafe; color:#1e3a5f; }
    tr.group-header-stk td:hover { background:#bfdbfe; }
    tr.child-row td { padding-left:28px; }
    tr.child-row.selected td { background:#ecfdf5; }
    tr.child-row:hover td { background:#f8fafc; cursor:pointer; }
    tr.child-row.hidden { display:none; }
    /* Type row colours — matches stock.html */
    tr.row-end-product td  { background:#dbeafe; }
    tr.row-assembly td     { background:#fef9c3; }
    tr.row-part td         { background:#dcfce7; }
    tr.row-material td     { background:#ede9fe; }
    tr.group-header.row-end-product td  { background:#dbeafe; color:#1e3a5f; }
    tr.group-header.row-assembly td     { background:#fef9c3; color:#854d0e; }
    tr.group-header.row-part td         { background:#dcfce7; color:#166534; }
    tr.group-header.row-material td     { background:#ede9fe; color:#6b21a8; }
    tr.group-header.row-end-product:hover td  { background:#bfdbfe; }
    tr.group-header.row-assembly:hover td     { background:#fef08a; }
    tr.group-header.row-part:hover td         { background:#bbf7d0; }
    tr.group-header.row-material:hover td     { background:#ddd6fe; }
    tr.section-divider td { padding:4px 6px; cursor:pointer; user-select:none; }
    tr.section-divider td .section-chevron { display:inline-block; margin-right:6px; transition:transform .15s; font-style:normal; }
    tr.section-divider td .section-chevron.collapsed { transform:rotate(-90deg); }
    /* Internal Products divider — light purple, black border */
    tr.section-divider-internal td { background:transparent; }
    tr.section-divider-internal td .divider-inner { display:inline-block; background:#f3e8ff; color:#0f172a; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.9px; border:1.5px solid #0f172a; border-radius:8px; padding:3px 12px; }
    tr.section-divider-internal:hover td .divider-inner { background:#e9d5ff; }
    /* Assembly / Other divider — light yellow, orange border */
    tr.section-divider-other td { background:transparent; }
    tr.section-divider-other td .divider-inner { display:inline-block; background:#fefce8; color:#0f172a; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.9px; border:1.5px solid #f97316; border-radius:8px; padding:3px 12px; }
    tr.section-divider-other:hover td .divider-inner { background:#fef9c3; }
    .overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:100; align-items:center; justify-content:center; }
    .overlay.open { display:flex; }
    .modal { background:var(--surface); border:1px solid var(--border); border-radius:14px; width:520px; max-width:96vw; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(15,23,42,.18); }
    .modal-wide { width:900px; max-width:96vw; min-height:420px; resize:vertical; overflow:hidden; }
    .modal-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); user-select:none; }
    .modal-head h2 { margin:0; font-size:16px; }
    .modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); line-height:1; }
    .modal-body { padding:16px; overflow-y:auto; flex:1; }
    .modal-foot { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; align-items:center; }
    .form-group { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
    .form-group label { font-size:12px; font-weight:600; color:#334155; }
    .form-group input { border:1px solid #cbd5e1; border-radius:7px; padding:6px 8px; font-size:13px; color:var(--text); background:#fff; width:100%; }
    .form-group input:disabled { background:#f1f5f9; color:var(--muted); }
    .form-group select { border:1px solid #cbd5e1; border-radius:7px; padding:6px 8px; font-size:13px; color:var(--text); background:#fff; width:100%; }
    .form-group select:disabled { background:#f1f5f9; color:var(--muted); }
    .chevron { display:inline-block; margin-right:6px; transition:transform .15s; font-style:normal; }
    .chevron.open { transform:rotate(90deg); }
    
    /* Grid modal styles */
    .grid-table { width:100%; border-collapse:collapse; margin-top:10px; font-size:12px; }
    .grid-table th { background:#f8fafc; font-weight:600; padding:6px 8px; position:sticky; top:0; z-index:1; }
    .grid-table td { padding:6px 8px; border-bottom:1px solid #f1f5f9; }
    .grid-table tr:hover td { filter:brightness(0.97); }
    .grid-table tr.row-end-product td  { background:#dbeafe; }
    .grid-table tr.row-assembly td     { background:#fef9c3; }
    .grid-table tr.row-part td         { background:#dcfce7; }
    .grid-table tr.row-material td     { background:#ede9fe; }
    .grid-table input[type="number"] { width:70px; padding:4px 6px; border:1px solid #cbd5e1; border-radius:5px; font-size:12px; }
    .grid-table input[type="checkbox"] { width:16px; height:16px; cursor:pointer; }
    .grid-table .readonly { background:#f1f5f9; color:var(--muted); border:none; width:80px; }
    .grid-table .btn-remove { background:#ef4444; color:#fff; border:none; border-radius:4px; padding:4px 8px; font-size:11px; cursor:pointer; }
    .grid-table .btn-remove:hover { background:#dc2626; }
    .grid-summary { margin-top:12px; padding:10px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; font-size:13px; }
    .grid-summary strong { color:#166534; }
    .grid-filter { margin-bottom:10px; }
    .grid-filter input { width:100%; padding:6px 8px; border:1px solid #cbd5e1; border-radius:7px; font-size:13px; }
    .grid-selected-parent { display:flex; align-items:center; gap:12px; margin-bottom:10px; padding:8px 12px; background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px; font-size:15px; font-weight:700; color:#0c4a6e; }
    #selectedParentLabel { font-size:16px; font-weight:800; color:#0f172a; }

    /* Parent picker (Step A) styles */
    .picker-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
    .picker-label { font-size:13px; font-weight:600; color:#334155; white-space:nowrap; }
    .picker-header .search-input { flex:1; min-width:180px; width:auto; }
    .picker-legend { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:12px; flex-wrap:wrap; }
    .picker-filter-label { font-size:11px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.5px; }
    .picker-filter-sep { color:#cbd5e1; font-size:14px; margin:0 2px; }
    .picker-toggle { display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-size:12px; color:#374151; user-select:none; padding:3px 7px; border:1px solid #e2e8f0; border-radius:20px; background:#fff; transition:background .15s, border-color .15s; }
    .picker-toggle:hover { background:#f8fafc; border-color:#94a3b8; }
    .picker-toggle input[type="checkbox"] { width:12px; height:12px; cursor:pointer; }
    /* colour variants — active (checked) state */
    .toggle-amber:has(input:checked) { background:#fffbeb; border-color:#f59e0b; color:#92400e; }
    .toggle-amber input[type="checkbox"] { accent-color:#f59e0b; }
    .toggle-slate:has(input:checked)  { background:#f1f5f9; border-color:#64748b; color:#334155; }
    .toggle-slate input[type="checkbox"] { accent-color:#64748b; }
    .toggle-green:has(input:checked) { background:#f0fdf4; border-color:#22c55e; color:#166534; }
    .toggle-green input[type="checkbox"] { accent-color:#22c55e; }
    .toggle-blue:has(input:checked)  { background:#eff6ff; border-color:#3b82f6; color:#1d4ed8; }
    .toggle-blue input[type="checkbox"] { accent-color:#3b82f6; }
    /* unchecked — muted so user knows it's off */
    .picker-toggle:has(input:not(:checked)) { opacity:.55; }
    .legend-item { display:flex; align-items:center; gap:5px; }
    .legend-dot { width:10px; height:10px; border-radius:2px; display:inline-block; flex:0 0 10px; }
    .has-build-dot { background:#f59e0b; border:1px solid #d97706; }
    .no-build-dot { background:#e2e8f0; border:1px solid #cbd5e1; }
    .picker-grid-wrap { max-height:320px; overflow:auto; border:1px solid var(--border); border-radius:8px; }
    .picker-table { width:100%; border-collapse:collapse; font-size:13px; }
    .picker-table th { background:#f8fafc; font-weight:600; padding:7px 10px; position:sticky; top:0; z-index:1; }
    .picker-table td { padding:7px 10px; border-bottom:1px solid #f1f5f9; }
    .picker-row { cursor:pointer; }
    .picker-row:hover td { background:#f0f9ff; }
    .picker-row.has-build td { background:#fffbeb; border-left:3px solid #f59e0b; }
    .picker-row.has-build:hover td { background:#fef3c7; }
    .has-build-badge { display:inline-block; font-size:10px; font-weight:700; color:#92400e; background:#fde68a; border:1px solid #f59e0b; border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
    .btn-change-parent { margin-left:auto; background:none; border:1px solid #94a3b8; border-radius:6px; padding:4px 10px; font-size:12px; color:#475569; cursor:pointer; }
    .btn-change-parent:hover { background:#f1f5f9; border-color:#64748b; }
    /* Picker column sort */
    .picker-sortable { cursor:pointer; user-select:none; }
    .picker-sortable:hover { background:#e2e8f0; }
    .picker-sortable span { display:inline-flex; align-items:center; gap:4px; }
    .picker-sortable span::after { content:'↕'; opacity:.3; font-size:10px; }
    .picker-sortable.psort-asc span::after { content:'↑'; opacity:1; color:#f59e0b; }
    .picker-sortable.psort-desc span::after { content:'↓'; opacity:1; color:#f59e0b; }
    /* Close button circle */
    .modal-close-circle { border:1.5px solid #0f172a !important; border-radius:50% !important; width:26px !important; height:26px !important; display:inline-flex !important; align-items:center; justify-content:center; font-size:13px !important; padding:0 !important; }
    /* Sidebar group separator */
    .menu-sep { height:1px; background:#e5e7eb; margin:5px 8px; }
    /* H1 page-options dropdown */
    .h1-row { display:flex; align-items:center; gap:8px; }
    .h1-menu-wrap { position:relative; }
    .h1-menu-btn { background:none; border:1px solid #e2e8f0; border-radius:6px; padding:2px 8px; font-size:15px; cursor:pointer; color:#64748b; line-height:1.5; }
    .h1-menu-btn:hover { background:#f1f5f9; border-color:#94a3b8; color:#334155; }
    .h1-dropdown { position:absolute; top:calc(100% + 4px); left:0; z-index:60; background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 4px 18px rgba(15,23,42,.13); min-width:150px; padding:4px 0; }
    .h1-dropdown-item { display:flex; align-items:center; gap:6px; width:100%; background:none; border:none; padding:8px 14px; font-size:13px; color:#1e293b; cursor:pointer; text-align:left; }
    .h1-dropdown-item:hover { background:#f0f9ff; color:#0c4a6e; }

    @media (max-width:920px){ .layout,.layout.collapsed{grid-template-columns:1fr;} .sidebar{border-right:0;border-bottom:1px solid var(--border);} .panel{height:auto;} .layout.collapsed .brand-text,.layout.collapsed .section-title,.layout.collapsed .label{display:initial;} }