/*
   NOTE ON site.css COMPATIBILITY:
   site.css is the shared design system (loaded globally) and is
   never modified here.

   This file used to redeclare a full button system (.btn,
   .btn-primary, .btn-success, .btn-warning) with its own box
   model (34px height, 13px font). That directly conflicted with
   site.css's own .btn / .btn-primary rules — two stylesheets
   fighting over the same global component, with the result
   depending purely on load order. That has been removed: this
   page now defers entirely to site.css's (and Bootstrap's) button
   styling, and only adds the small page-specific tweaks the
   mapping toolbar actually needs, scoped under their own
   containers so they can never leak onto buttons elsewhere.

   The table/th/td rules below were previously bare element
   selectors, which meant they applied inconsistently: the
   "Current Mappings" table (no Bootstrap class) got yardmapping's
   compact styling, while "Bulk Preview" table (class="table ...")
   also matched site.css's ".table th"/".table td" rules, producing
   two differently-styled tables on the same page. They are now
   scoped under their containers with enough specificity to beat
   site.css's ".table" rules consistently, so both tables look the
   same regardless of Bootstrap classes or load order.
*/

* {
    box-sizing: border-box;
}

/* ============================================================
   PAGE
   ============================================================ */

.mapping-page {
    /* inherits height/flex-column/overflow from .yard-page-v2 */
}

/* ============================================================
   HEADER  (shared .yard-toolbar-v2 comes from yard.css;
   .subtitle / .header-actions are mapping-page specific)
   ============================================================ */

.subtitle {
    margin-top: 3px;
    color: #6b7280;
    font-size: 12px;
}

.header-actions {
    display: flex;
    gap: 7px;
}

    /* ============================================================
   BUTTON — page-specific sizing only.
   Colors/borders/hover states come from site.css (.btn,
   .btn-primary) and Bootstrap (.btn-success, .btn-warning).
   Only the mapping toolbar's height needs to match its 36px
   input/select fields, so that's all that's scoped here.
   ============================================================ */

    .header-actions .btn,
    .mapping-actions .btn {
        height: 36px;
        white-space: nowrap;
    }

/*
   "Select Slot" active state. site.css has no .btn-primary.active
   rule, so adding it here scoped to the one button that uses it
   cannot collide with anything else. Reuses the same --success
   design token site.css already defines.
*/
#selectModeButton.active {
    background: var(--success, #16a34a);
    border-color: var(--success, #16a34a);
    color: #ffffff;
}

.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ============================================================
   MAPPING TOOLBAR
   ============================================================ */

.mapping-toolbar {
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background: #fff;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.mapping-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

    .mapping-field label {
        font-size: 12px;
        color: #555;
        font-weight: 500;
    }

    .mapping-field input,
    .mapping-field select {
        height: 36px;
        min-width: 120px;
        padding: 5px 9px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: #fff;
    }

    .mapping-field:first-child input {
        width: 190px;
    }

    /* Select2 sizing to match native controls in the toolbar */
    .mapping-field .select2-container {
        min-width: 120px;
    }

        .mapping-field .select2-container .select2-selection--single {
            height: 36px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .mapping-field .select2-container .select2-selection__rendered {
            line-height: 34px;
            font-size: 13px;
        }

        .mapping-field .select2-container .select2-selection__arrow {
            height: 34px;
        }

/* ============================================================
   BUTTON AREA
   ============================================================ */

.mapping-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

    .mapping-actions button {
        height: 36px;
        white-space: nowrap;
        padding: 0 14px;
        cursor: pointer;
        position: static;
        float: none;
        margin: 0;
    }

/* ============================================================
   SVG TOOLBAR
   ============================================================ */

.svg-toolbar {
    height: 46px;
    flex-shrink: 0;
    background: #f8fafc;
    border-bottom: 1px solid #d1d5db;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.zoom-button {
    min-width: 36px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid #9ca3af;
    background: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

    .zoom-button:hover {
        background: #e5e7eb;
    }

.zoom-reset {
    font-size: 12px;
    min-width: 48px;
}

.zoom-label {
    min-width: 55px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #374151;
}

.select-mode-off,
.select-mode-on {
    padding: 5px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.select-mode-off {
    background: #fee2e2;
    color: #991b1b;
}

.select-mode-on {
    background: #dcfce7;
    color: #166534;
}

.zoom-help {
    margin-left: 10px;
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}

/* ============================================================
   MAIN
   ============================================================ */

.mapping-content {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 10px;
    padding: 10px;
    overflow: hidden;
}

/* ============================================================
   SVG PANEL
   ============================================================ */

.svg-panel {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    overflow: hidden;
}

#svgContainer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    cursor: default;
    background: #ffffff;
}

    #svgContainer.select-mode {
        cursor: crosshair;
    }

    #svgContainer.panning {
        cursor: grabbing;
    }

    #svgContainer svg {
        display: block;
        width: 100%;
        height: 100%;
        user-select: none;
        -webkit-user-select: none;
    }

    #svgContainer [id^="slot-"] {
        cursor: inherit;
    }

    #svgContainer #container-slots polygon[id^="slot-"] {
        pointer-events: all !important;
        cursor: crosshair;
    }

        #svgContainer #container-slots polygon[id^="slot-"]:hover {
            stroke: #ff9800 !important;
            stroke-width: 1.2 !important;
            vector-effect: non-scaling-stroke;
        }

    #svgContainer svg polygon[id^="slot-"] {
        pointer-events: all;
        cursor: pointer;
    }

    /* ============================================================
   SELECTED / HOVER CELL HIGHLIGHTS
   ============================================================ */

    #svgContainer svg polygon.svg-slot-selected {
        fill: rgba(255, 193, 7, 0.45) !important;
        stroke: #ff0000 !important;
        stroke-width: 2.5 !important;
        vector-effect: non-scaling-stroke !important;
        opacity: 1 !important;
    }

    #svgContainer svg polygon.svg-slot-hover {
        fill: rgba(0, 123, 255, 0.20) !important;
        stroke: #0066ff !important;
        stroke-width: 2 !important;
        vector-effect: non-scaling-stroke !important;
        cursor: pointer;
    }

/* ============================================================
   SELECTED SLOT INFO
   ============================================================ */

.selected-slot-info {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    min-width: 240px;
    padding: 9px 13px;
    background: rgba(17, 24, 39, 0.92);
    color: #ffffff;
    border-radius: 5px;
    font-size: 12px;
    pointer-events: none;
    z-index: 20;
    overflow-wrap: anywhere;
}

/* ============================================================
   MAPPING LIST
   ============================================================ */

.mapping-list-panel {
    width: 460px;
    min-width: 460px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .mapping-list-panel h2 {
        margin: 0;
        font-size: 17px;
    }

.mapping-count {
    margin-top: 3px;
    margin-bottom: 8px;
    color: #6b7280;
    font-size: 12px;
}

.table-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

    /*
   Scoped under their containers (not bare table/th/td) so these
   rules consistently beat site.css's ".table th"/".table td" rules
   regardless of whether a given <table> carries Bootstrap's
   "table" class or not — both the unclassed "Current Mappings"
   table and the "table table-sm table-bordered" Bulk Preview
   table now render identically.
*/
    .table-container table,
    .bulk-preview-table-wrap table {
        width: 100%;
        border-collapse: collapse;
        font-size: 11px;
    }

    .table-container th,
    .bulk-preview-table-wrap th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #f3f4f6;
        border-bottom: 1px solid #d1d5db;
        padding: 6px;
        text-align: left;
    }

    .table-container td,
    .bulk-preview-table-wrap td {
        border-bottom: 1px solid #e5e7eb;
        padding: 5px;
    }

.delete-button {
    border: 1px solid #dc2626;
    background: #ffffff;
    color: #dc2626;
    border-radius: 3px;
    font-size: 10px;
    padding: 3px 6px;
    cursor: pointer;
}

.mapping-svg-link {
    border: none;
    background: none;
    color: #0d6efd;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
}

    .mapping-svg-link:hover {
        color: #084298;
    }

.bulk-svg-slot-link {
    border: none;
    background: none;
    color: #0d6efd;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
}

    .bulk-svg-slot-link:hover {
        color: #084298;
    }

/* ============================================================
   BULK PREVIEW
   ============================================================ */

.bulk-preview-panel {
    margin-top: 20px;
}

.bulk-preview-summary {
    margin-bottom: 10px;
    font-size: 13px;
}

.bulk-preview-table-wrap {
    max-height: 400px;
    overflow: auto;
    border: 1px solid #ddd;
}

.bulk-save-area {
    margin-top: 15px;
    padding: 12px;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#bulkSaveStatus {
    font-size: 14px;
}

/* ============================================================
   MESSAGE
   ============================================================ */

.message {
    position: fixed;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    padding: 9px 18px;
    border-radius: 5px;
    font-size: 13px;
    z-index: 1000;
    pointer-events: none;
    max-width: calc(100% - 32px);
    text-align: center;
}

    .message.info {
        background: #dbeafe;
        color: #1e3a8a;
    }

    .message.success {
        background: #dcfce7;
        color: #166534;
    }

    .message.error {
        background: #fee2e2;
        color: #991b1b;
    }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    html, body {
        overflow-y: auto;
    }

    .yard-page-v2 {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .yard-toolbar-v2 {
        align-items: flex-start;
        flex-direction: column;
    }

    .mapping-toolbar {
        flex-wrap: wrap;
        height: auto;
    }

    .mapping-actions {
        margin-left: auto;
    }

    .mapping-content {
        flex-direction: column;
        overflow: visible;
    }

    .svg-panel {
        min-height: 420px;
        height: 55vh;
        flex: none;
    }

    .mapping-list-panel {
        width: 100%;
        min-width: 0;
        max-height: 45vh;
    }

    .bulk-preview-table-wrap {
        max-height: 300px;
    }
}

@media (max-width: 640px) {

    .mapping-toolbar {
        padding: 8px;
        gap: 6px;
    }

    .mapping-field input,
    .mapping-field select,
    .mapping-field .select2-container {
        min-width: 100px;
    }

    .mapping-field:first-child input {
        width: 140px;
    }

    .mapping-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .svg-toolbar {
        flex-wrap: wrap;
        height: auto;
        padding: 6px;
    }

    .zoom-help {
        display: none;
    }

    .svg-panel {
        height: 45vh;
        min-height: 320px;
    }

    .table-container table,
    .bulk-preview-table-wrap table {
        font-size: 10px;
    }
}

/* ============================================================
   MAXIMIZE OVERLAY

   When toggled, the yard canvas expands to fill the viewport
   in a fixed-position overlay above everything else on the
   page. The details panel/grid layout is untouched underneath,
   so restoring simply removes the class.
   ============================================================ */

.svg-panel-v2.is-maximized {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1050;
    border-radius: 0;
    border: none;
}

.exit-maximize-btn {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1060;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, .65);
    color: #ffffff;
    font-size: 16px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}

    .exit-maximize-btn:hover {
        background: rgba(15, 23, 42, .85);
    }

.svg-panel-v2.is-maximized .exit-maximize-btn {
    display: block;
}

body.yard-maximized-active {
    overflow: hidden;
}