/* ============================================================
   RIGHT SIDEBAR: COLLAPSE, STEPS, FORM CONTROLS, BUTTONS
   ============================================================ */

/* --- Export buttons --- */

/* Generic container for sidebar buttons — stacked */
.sidebar-btns {
    display: grid;
    gap: 6px;
    width: 100%;
    margin-bottom: 6px;
}

.sidebar-btns button {
    width: 100%;
    padding: 7px 12px;
    font-size: var(--dc-text-sm);
}

/* Project menu — icon-only buttons in a row, same white tile as the rack type
   and tray mode pickers. Labels live in the tooltip, so the step costs one line
   of sidebar height instead of four stacked buttons. */
.project-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.project-btns .icon-mode-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.project-btns .icon-mode-btn img {
    width: 28px;
    height: 28px;
    display: block;
}

.export-buttons {
    margin-top: 6px;
    padding-top: 9px;
    border-top: 1px solid var(--dc-n-150);
}

/* --- Sidebar container --- */

.controls {
    width: 461px;
    min-width: 280px;
    max-width: 700px;
    flex-shrink: 0;
    padding: 15px;
    border-left: 1px solid var(--dc-n-150);
    overflow-y: auto;
    background: var(--dc-n-50);
    position: relative;
    user-select: none;
}

.sidebar-resize-handle {
    width: 5px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 10;
    transition: background 0.15s;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.resizing {
    background: var(--dc-c-accent);
}

/* --- Steps --- */

.step {
    margin-bottom: 11px;
}

.step-hidden {
    display: none;
}

.step-content {
    padding-left: 24px;
}

.step.collapsed .step-content {
    display: none;
}

.step.locked {
    opacity: 0.7;
}

.step.locked .step-content {
    pointer-events: none;
}

.step-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 8px;
}

.steps-nav-locked .step-header {
    cursor: not-allowed;
    opacity: 0.6;
}

.step.collapsed .step-header {
    margin-bottom: 0;
}

.step-header::after {
    content: '▾';
    margin-left: auto;
    font-size: 16px;
    color: var(--dc-n-400);
    transition: transform 0.2s;
    line-height: 1;
}

.step.collapsed .step-header::after {
    transform: rotate(-90deg);
}

.step-number {
    background: var(--dc-c-accent);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: var(--dc-text-xs);
    margin-right: 9px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.step-number.collapsed {
    opacity: 0.6;
}

.step-number--file {
    background: #8a9db5;
    border-radius: 4px;
}

.step-number--export {
    background: #7aab9c;
    border-radius: 4px;
}


.step-title {
    font-size: var(--dc-text-lg);
    font-weight: 600;
    color: var(--dc-c-dark);
}

/* --- Form controls --- */

.form-group {
    margin-bottom: 11px;
}

.form-row {
    display: flex;
    gap: 11px;
    align-items: end;
    flex-wrap: wrap;
}

label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: var(--dc-text-xs);
    color: var(--dc-n-800);
}

input[type="number"],
input[type="text"],
select {
    padding: 7px 9px;
    border: 1px solid var(--dc-n-150);
    border-radius: var(--dc-field-radius);
    font-size: var(--dc-text-sm);
    font-family: 'Golos Text', sans-serif;
    width: 100%;
    transition: border-color var(--dc-transition), box-shadow var(--dc-transition);
}

input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
    outline: none;
    border-color: var(--dc-field-border-focus);
    box-shadow: var(--dc-focus-ring);
}

.input-group {
    flex: 1;
    min-width: 150px;
}

/* --- Buttons --- */

/* --- Rack type icon picker --- */

/* Fiber / Copper type toggle — same icon buttons as the draw modes below it */
.tray-type-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.tray-type-btn {
    background: var(--dc-n-0);
    border: 2px solid var(--dc-n-150);
    border-radius: 8px;
    padding: 5px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

/* Nudged down because the tray art sits in the lower half of its viewBox — centred by
   the box it would read as sitting too high. */
.tray-type-btn img {
    width: 50px;
    height: 50px;
    display: block;
    margin-top: 6px;
}

.tray-type-btn.active {
    border-color: var(--dc-c-accent);
    background: var(--dc-c-accent-light);
}

#exitTrayModeBtn.exit-tray-active {
    background: var(--dc-c-error);
    color: var(--dc-n-0);
    border-color: var(--dc-c-error-hover);
}

#exitTrayModeBtn.exit-tray-active:hover {
    background: var(--dc-c-error-hover);
}

.tray-type-btn:hover:not(.active) {
    background: #f0f8f6;
    border-color: var(--dc-c-accent);
}

.tray-draw-mode-selector {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.tray-mode-btn {
    background: var(--dc-n-0);
    border: 2px solid var(--dc-n-150);
    border-radius: 6px;
    padding: 5px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.tray-mode-btn img {
    width: 20px;
    height: 20px;
    display: block;
}

.tray-mode-btn:hover {
    background: #f0f8f6;
    border-color: var(--dc-c-accent);
}

.tray-mode-btn.active {
    border-color: var(--dc-c-accent);
    background: var(--dc-c-accent-light);
}

#staticRectModeBtn.active {
    border-color: var(--dc-c-error);
    background: rgba(231, 76, 60, 0.10);
}

/* The collision toggle is the one button in this row whose resting state is PRESSED, so
   it is the off state that has to read as unusual: the warning sign goes grey and fades.
   Colour alone would not say it — the icon is amber either way at a glance. */
#collisionsToggleBtn:not(.active) img {
    filter: grayscale(1);
    opacity: 0.45;
}

/* Automatic drops. Unlike the three draw modes beside it this one is on by default, so
   `active` has to read as "working normally" rather than "armed" — hence the accent
   stroke when on and a plain grey one when off, instead of only a border to look at. */
#autoDropsBtn        { color: var(--dc-n-500); }
#autoDropsBtn.active { color: var(--dc-c-accent); }

.rack-type-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rack-type-btn {
    background: var(--dc-n-0);
    border: 2px solid var(--dc-n-150);
    border-radius: 6px;
    padding: 5px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: border-color 0.15s, background 0.15s;
}

.rack-type-btn:active {
    cursor: grabbing;
}

.icon-mode-btn {
    background: var(--dc-n-0);
    border: 2px solid var(--dc-n-150);
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.icon-mode-btn:hover {
    background: #f0f8f6;
    border-color: var(--dc-c-accent);
}

.icon-mode-btn.active {
    border-color: var(--dc-c-accent);
    background: var(--dc-c-accent-light);
}

.rack-type-btn:hover {
    background: #f0f8f6;
    border-color: var(--dc-c-accent);
}

.rack-type-btn.active {
    border-color: var(--dc-c-accent);
    background: var(--dc-c-accent-light);
}

/* ODF config selector in sidebar */
.odf-browse-btn {
    width: 100%;
    padding: 7px 12px;
    background: var(--dc-n-0);
    border: 1.5px dashed var(--dc-c-accent);
    border-radius: 7px;
    color: var(--dc-c-accent);
    font-size: var(--dc-text-sm);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.12s, border-color 0.12s;
}

.odf-browse-btn:hover {
    background: var(--dc-c-accent-light);
}

.odf-selected-card {
    background: #f4f9f8;
    border: 1.5px solid var(--dc-c-accent);
    border-radius: 7px;
    padding: 8px 10px;
    margin-bottom: 6px;
}

.odf-selected-name {
    font-size: var(--dc-text-sm);
    font-weight: 600;
    color: var(--dc-c-dark);
    line-height: 1.3;
}

.odf-selected-code {
    font-size: var(--dc-text-2xs);
    color: var(--dc-n-500);
    font-family: monospace;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Rack prototype preview (Step 2) ── */
.rack-proto-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 0 4px;
    gap: 8px;
    width: 100%;
}

.rack-proto-grid {
    display: grid;
    grid-template-columns: 26px 1fr;
    grid-template-rows: auto 26px;
    gap: 5px;
    width: 100%;
}

/* ODF mode: no arrow buttons, racks fill full width */
.rack-proto-grid--odf {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}
.rack-proto-grid--odf .rack-proto-arrow {
    display: none;
}
.rack-proto-grid--odf .rack-proto-racks-row {
    grid-column: 1;
    grid-row: 1;
}

.rack-proto-racks-row {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: 3px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.rack-proto-arrow {
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--dc-n-200);
    border-radius: 4px;
    cursor: pointer;
    color: var(--dc-n-800);
    font-size: 15px;
    line-height: 1;
    transition: background 0.12s, border-color 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.rack-proto-arrow:hover {
    background: var(--dc-c-accent-light);
    border-color: var(--dc-c-accent);
    color: #2a8068;
}

.rack-proto-arrow--w {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    align-self: stretch;
    font-size: 15px;
}

.rack-proto-arrow--d {
    grid-column: 2;
    grid-row: 2;
    height: 20px;
    font-size: 11px;
}

.rack-proto-rack {
    border-radius: 3px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 6px;
    gap: 2px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: width 0.15s, height 0.15s;
}

.rack-proto-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--dc-c-dark);
    text-align: center;
    padding: 0 4px;
    cursor: default;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.1s;
}
.rack-proto-name--interactive {
    cursor: pointer;
}
.rack-proto-name--interactive:hover {
    border-bottom-color: var(--dc-n-500);
}


.rack-proto-dim {
    font-size: 9px;
    color: var(--dc-n-750);
    text-align: center;
    line-height: 1.2;
}

.rack-proto-height-badge {
    font-size: 9px;
    font-weight: 600;
    color: var(--dc-n-0);
    background: rgba(0,0,0,0.28);
    border-radius: 3px;
    padding: 1px 4px;
    margin-top: 3px;
    cursor: pointer;
    transition: background 0.1s;
}
.rack-proto-height-badge:hover {
    background: rgba(0,0,0,0.45);
}

.rack-proto-idx {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 8px;
    font-weight: 700;
    color: rgba(0,0,0,0.4);
}

/* Dark background rack types (e.g. GPU) — light text & icon */
.rack-proto-rack--dark .rack-proto-name {
    color: rgba(255,255,255,0.92);
}
.rack-proto-rack--dark .rack-proto-name--interactive:hover {
    border-bottom-color: rgba(255,255,255,0.55);
}
.rack-proto-rack--dark .rack-proto-dim {
    color: rgba(255,255,255,0.7);
}
.rack-proto-rack--dark .rack-proto-idx {
    color: rgba(255,255,255,0.55);
}
.rack-proto-rack--dark img {
    filter: invert(1) brightness(2);
    opacity: 0.75;
}

/* A label beside a number field, in the sidebar. Two names on one rule rather than two
   rules: the cabinet prototype's count and the world tray's two levels are the same row,
   and the second name exists only because the first one says "rack-proto". */
.rack-proto-count-row,
.tray-height-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tray-height-row + .tray-height-row {
    margin-top: 6px;
}


.odf-change-btn {
    border-style: solid;
    font-size: var(--dc-text-xs);
    padding: 5px 10px;
}

/* A bare <button> IS the primary button — the product has been written that way from
   the start, and .btn--primary is the same thing said with a class. They used to be two
   looks: 12px at 7×15 with a 4px corner here, 13px at 8×16 with a 6px corner there, and
   the two stood side by side in the same toolbar five pixels apart in height.
   This is now the .btn recipe exactly, so both spellings give one control.

   The transparent border is what carries the last three pixels of --dc-control-h, and it
   is transparent rather than absent so a button that later wants an outline does not
   change size when it gets one. A button that sets its own padding keeps its own size:
   the small ones mean it. */
button {
    background: var(--dc-c-accent);
    color: var(--dc-n-0);
    border: 1.5px solid transparent;
    padding: 8px 16px;
    border-radius: var(--dc-radius-sm);
    font-size: var(--dc-text-md);
    font-family: 'Golos Text', sans-serif;
    cursor: pointer;
    transition: background var(--dc-transition), border-color var(--dc-transition);
    font-weight: 600;
}

button:hover {
    background: var(--dc-c-accent-hover);
}

button:disabled {
    background: var(--dc-n-300);
    cursor: not-allowed;
}

/* Keyboard focus ring for every button app-wide */
button:focus-visible {
    outline: none;
    box-shadow: var(--dc-focus-ring);
}

.secondary-btn {
    background: var(--dc-n-500);
}

.secondary-btn:hover {
    background: var(--dc-c-muted);
}

/* Destructive actions — solid red (was unstyled and fell back to accent) */
.danger-btn {
    background: var(--dc-c-error);
}

.danger-btn:hover {
    background: var(--dc-c-error-hover);
}

/* --- Unit toggle --- */

/* --- Misc utilities --- */

.info-badge {
    display: inline-block;
    background: #e8f4f8;
    color: var(--dc-c-info);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--dc-text-sm);
    margin-left: 10px;
}

.hidden {
    display: none;
}

.rack-size-option {
    display: block;
    padding: 8px;
    margin: 4px 0;
}

/* --- Zone list (Step 1 → Space) --- */

#zoneList {
    margin-top: 8px;
}

.zone-list-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.zone-list-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}

/* A tone in the primitive's sense: it sets what .badge paints from and paints
   nothing itself. The three !important declarations that used to be here were
   beating the :first-child accent of .spec-badge, a rule that no longer exists. */
.zone-id-badge {
    --badge-soft: var(--dc-c-muted);
    --badge-ink:  #fff;
    --badge-line: #636e72;
}

.zone-rack-count {
    font-size: var(--dc-text-xs);
    color: var(--dc-n-600);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
}

.link-item.zone-list-item.highlighted {
    background: var(--dc-n-25);
    color: inherit;
    border-left: 3px solid var(--dc-c-accent);
    padding-left: 7px;
}

.link-item.zone-list-item.highlighted div,
.link-item.zone-list-item.highlighted .zone-rack-count {
    color: var(--dc-n-600);
}

.zone-add-btn {
    width: 100%;
    margin-top: 4px;
}

.zone-move-btns {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
    margin-left: 6px;
}

.zone-move-btn {
    background: none;
    border: 1px solid var(--dc-n-200);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 14px;
    cursor: pointer;
    color: var(--dc-n-800);
}

.zone-move-btn:hover:not(:disabled) {
    background: var(--dc-n-100);
    border-color: var(--dc-n-400);
}

.zone-move-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.zone-3d-btn {
    background: var(--dc-n-0);
    border: 2px solid var(--dc-n-150);
    border-radius: 6px;
    padding: 3px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: border-color 0.15s, background 0.15s;
}

.zone-3d-btn:hover {
    background: #f0f8f6;
    border-color: var(--dc-c-accent);
}

.link-item.zone-list-item.highlighted .zone-move-btn {
    border-color: var(--dc-n-200);
    color: var(--dc-n-800);
}

.link-item.zone-list-item.highlighted .zone-move-btn:hover:not(:disabled) {
    background: var(--dc-n-100);
}

/* ── Price List Modal ─────────────────────────────────────────────────────── */

.pl-modal-content {
    width: 98vw !important;
    max-width: 98vw !important;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0 !important;
}

.pl-modal-content .modal-header {
    padding: 16px 20px 0;
    margin-bottom: 8px;
}

.pl-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 8px;
    border-bottom: 1px solid var(--dc-n-50);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.pl-filter-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.pl-filter-btn {
    padding: 4px 12px;
    border-radius: 14px;
    border: 1.5px solid var(--dc-n-150);
    background: var(--dc-n-25);
    font-size: var(--dc-text-sm);
    font-weight: 500;
    cursor: pointer;
    color: var(--dc-n-800);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pl-filter-btn:hover  { background: var(--dc-n-100); border-color: var(--dc-n-300); }
.pl-filter-btn.active { background: var(--dc-c-accent); border-color: var(--dc-c-accent); color: var(--dc-n-0); }

.pl-search {
    flex: 1;
    min-width: 180px;
    max-width: 300px;
    padding: 5px 10px;
    border: 1.5px solid var(--dc-n-150);
    border-radius: 6px;
    font-size: var(--dc-text-sm);
    outline: none;
}
.pl-search:focus { border-color: var(--dc-c-accent); }

.pl-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.pl-loading, .pl-empty {
    text-align: center;
    padding: 40px;
    color: var(--dc-n-400);
    font-size: var(--dc-text-md);
}

.pl-table-wrap {
    padding: 0 4px 12px;
}

.pl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dc-text-sm);
}

.pl-table thead th {
    position: sticky;
    top: 0;
    background: #f7f8fa;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--dc-n-900);
    border-bottom: 2px solid var(--dc-n-150);
    white-space: nowrap;
    z-index: 1;
}

.pl-admin-hint {
    font-size: var(--dc-text-2xs);
    font-weight: 400;
    color: var(--dc-n-400);
    margin-left: 6px;
}

.pl-group-row td {
    background: #f0f4f8;
    padding: 5px 10px;
    font-size: var(--dc-text-xs);
    font-weight: 700;
    color: #5a7a9a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-top: 2px solid #e0e8f0;
}

.pl-group-count {
    font-weight: 400;
    color: var(--dc-n-400);
    margin-left: 6px;
}

.pl-row td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--dc-n-50);
    vertical-align: middle;
    color: var(--dc-n-950);
}
.pl-row:hover td { background: #f9fbfd; }

.pl-th-name,  .pl-td-name  { min-width: 200px; }
.pl-th-fiber, .pl-td-fiber { width: 60px; text-align: center; }
.pl-th-splice,.pl-td-splice{ width: 66px; text-align: center; }
.pl-th-len,   .pl-td-len   { width: 60px; text-align: center; }
.pl-th-diam,  .pl-td-diam  { width: 64px; text-align: center; }
.pl-th-height,.pl-td-height{ width: 56px; text-align: center; }
/* The sales text is the longest field in the row and the least load-bearing, so it
   gets the leftover width and is allowed to be clipped rather than push the codes
   and prices off screen. */
.pl-th-sales, .pl-td-sales { min-width: 160px; color: var(--dc-n-750); font-size: var(--dc-text-xs);
                             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-th-part,  .pl-td-part  { min-width: 120px; font-family: monospace; font-size: var(--dc-text-xs); color: var(--dc-n-750); }
.pl-th-sku,   .pl-td-sku   { min-width: 120px; font-family: monospace; font-size: var(--dc-text-xs); color: var(--dc-n-750); }
.pl-th-price, .pl-td-price { width: 100px; text-align: right; white-space: nowrap; }
.pl-th-hub,   .pl-td-hub   { width: 32px; text-align: center; padding: 0 4px; }
.pl-th-notes, .pl-td-notes { min-width: 120px; color: var(--dc-n-600); font-size: var(--dc-text-xs); }
.pl-th-act,   .pl-td-act   { width: 80px; text-align: center; white-space: nowrap; }

.pl-hub-link {
    color: var(--dc-c-accent);
    text-decoration: none;
    font-size: var(--dc-text-md);
}
.pl-hub-link:hover { color: #4ea894; text-decoration: underline; }

.pl-td-name {
    word-break: break-word;
    white-space: normal;
}

/* Edit/clear buttons use the .icon-btn--settings/--delete primitives */
.pl-row--editing td { background: #f0f8ff !important; }
.pl-row--override td { background: #fffbf0; }

/* Override badge (★) shown next to user price */
.pl-override-badge {
    color: #f39c12;
    font-size: var(--dc-text-2xs);
    margin-left: 4px;
    vertical-align: middle;
    cursor: default;
}

/* Clear override button keeps only its spacing (look comes from primitives) */
.pl-clear-btn { margin-left: 2px; }

/* Inline edit form */
.pl-edit-form-row td { padding: 0; background: #f5fbff; border-bottom: 2px solid var(--dc-c-accent); }
.pl-edit-form {
    padding: 12px 16px;
}
.pl-ef-grid {
    display: grid;
    grid-template-columns: 160px 1fr 80px 80px 160px 160px 110px 1fr;
    gap: 8px 12px;
    align-items: end;
    flex-wrap: wrap;
}
.pl-ef-grid label {
    display: flex;
    flex-direction: column;
    font-size: var(--dc-text-xs);
    color: var(--dc-n-600);
    font-weight: 500;
    gap: 3px;
}
.pl-ef-grid label.pl-ef-name  { grid-column: span 1; }
.pl-ef-grid label.pl-ef-notes { grid-column: span 1; }
.pl-ef-grid label.pl-ef-wide  { grid-column: span 4; }
.pl-ef-grid input,
.pl-ef-grid select {
    padding: 5px 8px;
    border: 1.5px solid var(--dc-n-150);
    border-radius: 5px;
    font-size: var(--dc-text-sm);
    outline: none;
    background: var(--dc-n-0);
    width: 100%;
    box-sizing: border-box;
}
.pl-ef-grid input:focus,
.pl-ef-grid select:focus { border-color: var(--dc-c-accent); }
.pl-ef-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.pl-ef-save-btn {
    padding: 6px 20px;
    background: var(--dc-c-accent);
    color: var(--dc-n-0);
    border: none;
    border-radius: 6px;
    font-size: var(--dc-text-sm);
    cursor: pointer;
    font-weight: 600;
}
.pl-ef-save-btn:hover    { background: #4ea894; }
.pl-ef-save-btn:disabled { opacity: 0.5; cursor: default; }
.pl-ef-cancel-btn {
    padding: 6px 16px;
    background: var(--dc-n-50);
    color: var(--dc-n-800);
    border: none;
    border-radius: 6px;
    font-size: var(--dc-text-sm);
    cursor: pointer;
}
.pl-ef-cancel-btn:hover { background: var(--dc-n-150); }
.pl-ef-del-btn {
    padding: 6px 16px;
    background: var(--dc-c-error);
    color: var(--dc-n-0);
    border: none;
    border-radius: 6px;
    font-size: var(--dc-text-sm);
    font-weight: 600;
    cursor: pointer;
    margin-left: auto;
}
.pl-ef-del-btn:hover { background: var(--dc-c-error-hover); }

/* Add-row form (admin only) */
.pl-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px 6px;
    border-top: 1px solid var(--dc-n-150);
    flex-wrap: wrap;
}
.pl-add-row select,
.pl-add-row input[type="text"],
.pl-add-row input[type="number"] {
    padding: 5px 8px;
    border: 1px solid var(--dc-n-200);
    border-radius: 6px;
    font-size: var(--dc-text-sm);
    outline: none;
}
.pl-add-row input[type="text"]   { flex: 1; min-width: 180px; }
.pl-add-row select               { min-width: 140px; }
.pl-add-row select#plAddSplice   { min-width: 96px; }
.pl-add-btn {
    padding: 5px 14px;
    background: var(--dc-c-accent);
    color: var(--dc-n-0);
    border: none;
    border-radius: 6px;
    font-size: var(--dc-text-sm);
    cursor: pointer;
    white-space: nowrap;
}
.pl-add-btn:hover    { background: #4ea894; }
.pl-add-btn:disabled { opacity: 0.5; cursor: default; }

/* User menu extras */
.header-user-menu-action {
    display: block;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: var(--dc-text-md);
    color: var(--dc-c-dark);
    cursor: pointer;
    font-weight: 500;
}
.header-user-menu-action:hover { background: #f0f4f8; }

.header-user-menu-divider {
    height: 1px;
    background: var(--dc-n-50);
    margin: 2px 0;
}