:root {
    --project-topbar-h: 0px; /* set to .project-topbar height if it overlaps the list */
}

/* =========================================================
   Page shell
   ========================================================= */

.scope-page {
    background: var(--bg-page, #f6f7f9);
    padding: 10px;
}

/* =========================================================
   AREA / ROOM CARD
   ========================================================= */

.scope-area,
.scope-info-data__area-block {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, rgba(0,0,0,.08));
    border-radius: var(--r-16, 16px);
    box-shadow: none;
    margin-bottom: 14px;
    /* IMPORTANT: sticky breaks when parent clips overflow */
    overflow: visible;
}

/* Sticky room header (BUTTON) */
.scope-area__hdrbtn {
    position: sticky;
    top: var(--project-topbar-h);
    z-index: 20;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    padding-left: 12px;
    /* RoomData-like header surface */
    background: linear-gradient( 180deg, rgba(0, 102, 204, 0.10), rgba(0, 102, 204, 0.00) );
    border: 0;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
    /* Brand left rail */
    border-left: 5px solid var(--brand-primary, #0d6efd);
    border-radius: var(--r-16, 16px) var(--r-16, 16px) 0 0;
    /* Button reset */
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    background-clip: padding-box;
}

    .scope-area__hdrbtn:hover {
        background: linear-gradient( 180deg, rgba(0, 102, 204, 0.14), rgba(0, 102, 204, 0.00) );
    }

    .scope-area__hdrbtn:focus-visible {
        outline: none;
        box-shadow: var(--focus, 0 0 0 4px rgba(0, 102, 204, .18));
    }

/* Room title bigger/bolder */
.scope-info-data__area-title {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;
    color: var(--text-primary, rgba(0,0,0,.92));
}

/* Right side of header */
.scope-area__meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Big room total */
.scope-area__total-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
    margin-right: 6px;
}

.scope-area__total {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .2px;
    color: var(--text-primary, rgba(0,0,0,.92));
}

.scope-area__total-sub {
    font-size: 11px;
    font-weight: 700;
    opacity: .65;
    margin-top: 2px;
}

/* Count pill (match RoomData pills) */
.scope-pill {
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 102, 204, 0.10);
    border: 1px solid rgba(0, 102, 204, 0.22);
    color: var(--text-primary, rgba(0,0,0,.78));
    white-space: nowrap;
}

.scope-pill--sm {
    padding: 4px 8px;
    font-size: 11px;
}

/* Room chevron */
.scope-area__chev {
    display: inline-block;
    transition: transform .12s ease;
    opacity: .75;
    font-size: 14px;
}

    .scope-area__chev.is-open {
        transform: rotate(180deg);
    }

/* If you want rounded clipping INSIDE while sticky works */
.scope-area__clip {
    overflow: hidden;
    border-radius: 0 0 var(--r-16, 16px) var(--r-16, 16px);
}

/* Area body: subtle inset like RoomData lists */
.scope-area__body {
    padding: 14px;
    background: var(--bg-surface-2, rgba(0,0,0,.015));
    border-radius: 0 0 var(--r-16, 16px) var(--r-16, 16px);
}

/* =========================================================
   TRADE GROUP CARD
   ========================================================= */

.scope-info-data__trade-card {
    border: 1px solid var(--border, rgba(0,0,0,.08));
    border-radius: var(--r-16, 16px);
    overflow: hidden;
    margin: 12px 8px;
    background: var(--bg-surface, #fff);
    box-shadow: none;
}

/* Clickable trade header */
.scope-trade__hdrbtn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    border: 0;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
    /* “section header” surface */
    background: linear-gradient(180deg, rgba(0,0,0,.035), rgba(0,0,0,.015));
    /* Group marker rail (muted) */
    border-left: 4px solid rgba(0,0,0,.14);
}

    .scope-trade__hdrbtn:hover {
        background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.02));
    }

    .scope-trade__hdrbtn:focus-visible {
        outline: none;
        box-shadow: var(--focus, 0 0 0 4px rgba(0, 102, 204, .18));
    }

.scope-trade__right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Trade title: stronger hierarchy */
.scope-info-data__trade-title {
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .02em;
    color: var(--text-primary, rgba(0,0,0,.88));
}

/* Trade total (right side) */
.scope-trade__total {
    font-size: 12px;
    font-weight: 850;
    color: var(--text-secondary, rgba(0,0,0,.70));
    min-width: 84px;
    text-align: right;
    white-space: nowrap;
}

/* Trade chevron */
.scope-trade__chev {
    display: inline-block;
    transition: transform .12s ease;
    opacity: .7;
}

    .scope-trade__chev.is-open {
        transform: rotate(180deg);
    }

/* Trade body */
.scope-info-data__trade-body {
    background: transparent;
    padding: 8px 0 10px 0;
}

/* =========================================================
   ITEM ROWS (inset “cards” like your screenshot)
   ========================================================= */

.scope-info-data__trade-rowwrap {
    margin: 0;
}

/* Each row becomes a soft inset card */
.scope-item,
.scope-info-data__trade-row {
    display: grid;
    grid-template-columns: 1fr auto auto; /* main | meta | actions */
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
    background: var(--bg-surface, #fff);
    box-shadow: none;
}

/* spacing between inset cards */
.scope-info-data__trade-rowwrap + .scope-info-data__trade-rowwrap .scope-info-data__trade-row {
    margin-top: 8px;
}

.scope-item:hover,
.scope-info-data__trade-row:hover {
    background: var(--bg-surface-2, rgba(0,0,0,.015));
}

.scope-info-data__trade-item-info {
    min-width: 0;
}

.scope-info-data__trade-item-title {
    font-weight: 650;
    font-size: 13px;
    color: var(--text-primary, rgba(0,0,0,.90));
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Right meta cluster */
.scope-info-data__trade-item-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

/* Qty chip */
.scope-info-data__qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--bg-surface-2, rgba(0,0,0,.04));
    border: 1px solid var(--border, rgba(0,0,0,.10));
    white-space: nowrap;
}

/* Editable qty hover (keep your behavior, just toned down) */
.scope-info-data__qty--editable {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 999px;
    display: inline-block;
    border: 1px solid transparent;
    transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}

@media (hover: hover) and (pointer: fine) {
    .scope-info-data__qty--editable:hover {
        background: rgba(0, 102, 204, 0.10);
        border-color: rgba(0, 102, 204, 0.28);
        transform: translateY(-1px);
        color: var(--text-primary, rgba(0,0,0,.92));
    }
}

.scope-info-data__qty-input {
    width: 130px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.15);
    font-weight: 700;
}

/* Qty zero warning */
.scope-info-data__qty--zero {
    background-color: rgba(245, 158, 11, 0.14);
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.35);
    font-weight: 800;
}

/* PRICE: match RoomData (brand blue) */
.scope-info-data__trade-amt {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .1px;
    color: var(--brand-primary, #0d6efd);
    min-width: 86px;
    text-align: right;
    white-space: nowrap;
}

/* row actions */
.scope-info-data__row-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

/* action buttons */
.scope-info-data__details-btn,
.scope-info-data__delete-btn {
    width: 34px;
    height: 30px;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(0,0,0,.12));
    background: var(--bg-surface, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

    .scope-info-data__details-btn:hover,
    .scope-info-data__delete-btn:hover:not(:disabled) {
        background: var(--bg-surface-2, rgba(0,0,0,.03));
    }

/* Delete button (icon style) */
.scope-info-data__delete-btn {
    color: #dc2626;
}

    .scope-info-data__delete-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* warning state row */
.scope-info-data__trade-row--warning {
    border-left: 3px solid rgba(245, 158, 11, 0.65);
}

/* Empty state */
.scope-info-data__empty {
    padding: 18px 12px;
    text-align: center;
    color: rgba(0,0,0,.55);
    background: rgba(0,0,0,.02);
    border: 1px dashed rgba(0,0,0,.15);
    border-radius: 12px;
    margin: 10px;
}

/* =========================================================
   Buttons / Confirm dialog (kept, de-duped)
   ========================================================= */

.scope-info-data__btn {
    border: 1px solid rgba(0,0,0,.14);
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

    .scope-info-data__btn:hover {
        background: rgba(0,0,0,.03);
    }

    .scope-info-data__btn:disabled {
        opacity: .55;
        cursor: default;
    }

.scope-info-data__btn--danger {
    background: #dc2626;
    color: #fff;
    border-color: rgba(220,38,38,.35);
}

    .scope-info-data__btn--danger:hover:not(:disabled) {
        background: #b91c1c;
    }

.scope-info-data__btn--ghost:hover:not(:disabled) {
    background: #f3f4f6;
}

/* Confirmation Dialog */
.scope-info-data__confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

.scope-info-data__confirm-dialog {
    background: white;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: slideUp 0.2s ease-out;
}

.scope-info-data__confirm-header h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.scope-info-data__confirm-body {
    margin-bottom: 24px;
    color: #6b7280;
    line-height: 1.5;
}

    .scope-info-data__confirm-body strong {
        color: #111827;
        font-weight: 700;
    }

.scope-info-data__confirm-warning {
    margin-top: 12px;
    font-size: 14px;
    color: #dc2626;
}

.scope-info-data__confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =========================================================
   Item details panel (kept, cleaned)
   ========================================================= */

.scope-info-data__item-panel {
    margin: 10px 10px 0 10px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    background: rgba(0,0,0,.02);
    padding: 12px;
}

.scope-info-data__panel-empty {
    font-size: 12px;
    color: rgba(0,0,0,.6);
    padding: 8px 0;
}

.scope-info-data__allow-row {
    padding: 10px 0;
    border-top: 1px dashed rgba(0,0,0,.10);
}

    .scope-info-data__allow-row:first-child {
        border-top: none;
        padding-top: 0;
    }

.scope-info-data__allow-name {
    font-size: 12px;
    font-weight: 700;
    color: rgba(0,0,0,.80);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scope-info-data__item-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.scope-info-data__panel-section {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    padding: 12px;
}

.scope-info-data__panel-title {
    font-size: 12px;
    font-weight: 750;
    color: rgba(0,0,0,.85);
    margin-bottom: 8px;
}

.scope-info-data__panel-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.scope-info-data__check {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: rgba(0,0,0,.75);
    margin: 0;
}

.scope-info-data__panel-input {
    width: 140px;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 13px;
}

.scope-info-data__panel-textarea {
    width: 100%;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 10px;
    padding: 10px;
    font-size: 13px;
    resize: vertical;
}

.scope-info-data__panel-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.scope-info-data__panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.scope-info-data__panel-footer--inline {
    margin-top: 0;
    margin-bottom: 6px;
    padding: 0 2px;
}

.scope-info-data__panel-btn {
    border: 1px solid rgba(0,0,0,.16);
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
}

.scope-info-data__panel-btn--secondary {
    opacity: .8;
}

/* =========================================================
   Images / uploader (kept, de-duped)
   ========================================================= */

.scope-info-data__thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.scope-info-data__thumb-wrap {
    position: relative;
}

.scope-info-data__thumb {
    width: 100%;
    display: block;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,.02);
    aspect-ratio: 1 / 1;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: transform .10s ease, box-shadow .10s ease;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

    .scope-info-data__thumb:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(0,0,0,.10);
    }

    .scope-info-data__thumb:active {
        transform: translateY(0);
    }

    .scope-info-data__thumb:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.30);
        outline-offset: 2px;
    }

.scope-info-data__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scope-info-data__thumb-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.14);
    background: rgba(255,255,255,.92);
    color: rgba(15, 23, 42, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 0;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    opacity: 0.95;
    transform: scale(1);
    transition: opacity .12s ease, transform .12s ease, background .12s ease;
}

.scope-info-data__thumb-wrap:hover .scope-info-data__thumb-delete {
    opacity: 1;
    transform: scale(1.05);
}

.scope-info-data__thumb-delete:hover {
    background: #fff;
}

.scope-info-data__thumb-delete:active {
    transform: scale(0.98);
}

.scope-info-data__thumb-delete:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal overlay */
.scope-info-data__imgmodal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.scope-info-data__imgmodal {
    position: relative;
    width: min(960px, 96vw);
    max-height: 90dvh;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.scope-info-data__imgmodal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.14);
    background: rgba(255,255,255,.92);
    cursor: pointer;
    font-size: 22px;
    font-weight: 900;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.scope-info-data__imgmodal-img {
    width: 100%;
    height: auto;
    max-height: 90dvh;
    object-fit: contain;
    display: block;
    background: #0b1220;
}

/* Uploader card */
.scope-info-data__uploader {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    background: #fff;
    padding: 14px 14px 12px;
    margin-bottom: 12px;
}

.scope-info-data__uploader-title {
    font-size: 13px;
    font-weight: 800;
    color: rgba(0,0,0,.85);
    margin-bottom: 2px;
}

.scope-info-data__uploader-sub {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0,0,0,.55);
    margin-bottom: 10px;
}

.scope-info-data__dropzone {
    position: relative;
    display: grid;
    place-items: center;
    border: 2px dashed rgba(0,0,0,.14);
    border-radius: 14px;
    background: rgba(0,0,0,.015);
    min-height: 88px;
    cursor: pointer;
    overflow: hidden;
}

    .scope-info-data__dropzone:hover {
        background: rgba(0,0,0,.02);
        border-color: rgba(0,0,0,.20);
    }

.scope-info-data__file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.scope-info-data__dropzone-text {
    text-align: center;
    padding: 10px;
    pointer-events: none;
}

.scope-info-data__dropzone-strong {
    font-size: 13px;
    font-weight: 800;
    color: rgba(0,0,0,.85);
}

.scope-info-data__dropzone-muted {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0,0,0,.55);
}

.scope-info-data__dropzone.is-dragover {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.28);
}

.scope-info-data__pending {
    margin-bottom: 12px;
}

.scope-info-data__pending-title {
    font-size: 12px;
    font-weight: 750;
    color: rgba(0,0,0,.60);
    margin: 0 0 8px 2px;
}

.scope-info-data__thumb-grid--pending {
    opacity: .95;
}

.scope-info-data__thumb--pending {
    cursor: default;
}

.scope-info-data__thumb-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: rgba(0,0,0,.55);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {
    .scope-page {
        padding: 8px;
    }

    .scope-area__total {
        font-size: 15px;
    }

    .scope-area__total-sub {
        font-size: 10px;
    }

    /* Stack meta under title */
    .scope-item,
    .scope-info-data__trade-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: start;
    }

    .scope-info-data__trade-item-title {
        white-space: normal;
    }

    .scope-info-data__trade-item-meta {
        grid-column: 1 / -1;
        display: flex;
        gap: 10px;
        margin-top: 6px;
        align-items: center;
        justify-content: flex-start;
    }

    .scope-info-data__row-actions {
        grid-row: 1;
        grid-column: 2;
    }

    .scope-info-data__trade-amt {
        min-width: auto;
    }

    .scope-trade__total {
        min-width: auto;
        font-size: 12px;
    }
}

/* =========================================================
   Bridge classes used in markup (hdr wrappers)
   ========================================================= */

/* Your markup includes these classnames on the buttons */
.scope-info-data__area-hdr,
.scope-info-data__trade-hdr {
    /* no-op bridge so they inherit the button styles cleanly */
}

/* =========================================================
   RoomData-like “inset card” spacing + nicer grouping
   ========================================================= */

/* When a room is expanded, give the body a clip + inset feel */
.scope-area__body,
.scope-area__clip {
    /* safe even if you don't use scope-area__clip in markup */
    border-radius: 0 0 16px 16px;
}

/* Make trade cards sit inside the room content like RoomData */
.scope-area .scope-info-data__trade-card {
    margin-left: 12px;
    margin-right: 12px;
}

/* Make the trade header rail slightly more “RoomData” */
.scope-area .scope-trade__hdrbtn {
    border-left-color: rgba(13, 110, 253, .25);
}

/* Item rows already inset; tighten and unify the rhythm */
.scope-area .scope-info-data__trade-body {
    padding-top: 10px;
    padding-bottom: 12px;
}

/* This makes the “row cards” read like a list inside a group */
.scope-area .scope-info-data__trade-row,
.scope-area .scope-item {
    border-radius: 12px;
}

/* Optional: make the pills match RoomData's count bubble feel */
.scope-pill.scope-pill--sm {
    min-width: 28px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}