/* FilaBridge Dashboard - NFC Management Styles */

/* NFC QR Display Styles */
.nfc-qr-display {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 24px;
    margin-top: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    max-width: 100%;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.nfc-selected-info {
    margin-bottom: 20px;
}

.nfc-selected-info h4 {
    margin: 0 0 8px 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.nfc-selected-info div {
    color: #ccc;
    font-size: 14px;
    line-height: 1.4;
}

/* Holds the standard tag and, on single-toolhead setups, the quick-assign tag.
   Track counts are stated explicitly rather than with repeat(auto-fit, ...):
   the parent is width:fit-content, which leaves the available width indefinite,
   and auto-fit collapses to a single track when it cannot measure the space. */
.nfc-qr-columns {
    display: grid;
    grid-template-columns: minmax(220px, 300px);
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: start;
    gap: 24px;
}

.nfc-qr-display.has-combo .nfc-qr-columns {
    grid-template-columns: repeat(2, minmax(220px, 280px));
}

.nfc-qr-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The quick-assign column carries an extra line of description, so as plain
   stacks the two columns start their QR at different heights. Subgrid makes both
   columns share the parent's rows, so the headings occupy one row and the codes
   another, and the codes stay aligned however long the location name runs.
   Browsers without subgrid keep the flex rules above and simply mis-align. */
@supports (grid-template-rows: subgrid) {
    .nfc-qr-display.has-combo .nfc-qr-column {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
    }
}

/* Not enough room for two codes abreast: stack them. The panel scrolls, and
   the safe-centring above keeps the top of the first code reachable. */
@media (max-width: 1150px) {
    .nfc-qr-display.has-combo .nfc-qr-columns {
        grid-template-columns: minmax(220px, 300px);
    }
}

.nfc-qr-large-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Sized by the column rather than fixed, so two codes shrink to fit side by
   side instead of overflowing the panel. */
.nfc-qr-large {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.2);
    background: #fff;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.nfc-url-large {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #888;
    background: rgba(0,0,0,0.3);
    padding: 8px 12px;
    border-radius: 6px;
    word-break: break-all;
    text-align: center;
    max-width: 100%;
}

.nfc-url-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

.nfc-url-container .nfc-url-large {
    flex: 1;
    margin: 0;
}

.nfc-copy-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

.nfc-copy-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

.nfc-copy-btn:active {
    transform: scale(0.95);
}

.nfc-copy-icon {
    font-size: 16px;
    line-height: 1;
    user-select: none;
}

/* NFC Side-by-Side Layout */
.nfc-side-by-side {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 20px;
    height: 500px;
    max-height: 500px;
}

/* The 450px list column overflows a phone; stack the two panels and let the
   content set the height instead of a fixed 500px viewport. */
@media (max-width: 768px) {
    .nfc-side-by-side {
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
    }
}

.nfc-list-panel {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}

.nfc-display-panel {
    min-width: 0;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* "safe" keeps the content centred while it fits, but falls back to
       start-alignment once it is taller than the panel. Plain centring pushes
       the overflow past both edges, and the top half is then unreachable: a
       scroll container cannot scroll above its content origin. Browsers that
       do not understand "safe" ignore these two lines and keep the rules above. */
    align-items: safe center;
    justify-content: safe center;
    overflow: auto;
}

.nfc-search-container {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nfc-search-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.nfc-search-input::placeholder {
    color: #999;
}

.nfc-search-input:focus {
    outline: none;
    border-color: #4CAF50;
    background: rgba(255,255,255,0.15);
}

.nfc-list-container {
    height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.nfc-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nfc-list-item:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}

.nfc-list-item.selected {
    background: rgba(76, 175, 80, 0.2);
    border-color: #4CAF50;
}

.nfc-list-item .color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}

.nfc-list-item .location-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.nfc-list-item .item-info {
    flex: 1;
    min-width: 0;
}

.nfc-list-item .item-name {
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.nfc-list-item .item-details {
    font-size: 12px;
    color: #ccc;
}

.nfc-list-item .location-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.nfc-list-item .location-actions .btn-small {
    padding: 4px 8px;
    font-size: 11px;
    min-width: auto;
    border-radius: 4px;
}

.nfc-no-selection {
    text-align: center;
    color: #999;
}

.nfc-no-selection-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.nfc-no-selection h4 {
    margin: 0 0 8px 0;
    color: #ccc;
}

.nfc-no-selection p {
    margin: 0;
    font-size: 14px;
}


/* The Location Tags banner is a standard warning alert, just denser than the
   page-level ones in status.html since it sits inside a list panel. */
.nfc-info-banner {
    padding: 15px;
    margin: 0 0 15px 0;
}

.nfc-empty-message {
    padding: 20px;
    text-align: center;
    color: #666;
}