/* =========================================
   ASB Asset Manager Pro - Stylesheet
   ========================================= */

/* --- Global --- */
.asb-dashboard {
    font-family: "Meiryo", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 12px;
    color: #333;
    max-width: 100%;
    margin: 20px auto;
    box-sizing: border-box;
}

/* --- Toolbar --- */
.asb-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    padding: 6px 10px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.asb-search-group {
    display: flex;
    gap: 4px;
    align-items: center;
    white-space: nowrap;
}

.asb-toolbar label {
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
}

.asb-toolbar input[type="text"],
.asb-toolbar select {
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 11px;
    height: 28px;
    box-sizing: border-box;
}

.asb-search-scope {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-left: 4px;
    font-size: 11px;
}
.asb-search-scope label {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
}
.asb-search-scope input[type="radio"] {
    margin: 0;
    width: 13px;
    height: 13px;
    cursor: pointer;
}

/* Calendar icon for assets with deadline set (no alert showing) */
.asb-dl-calendar {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.35;
    vertical-align: middle;
    line-height: 1;
}

/* No-date badge for deadline table */
.dl-badge-nodate {
    display: inline-block;
    background: #e0e0e0;
    color: #888;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
}

/* No-date placeholder text in deadline table */
.dl-no-date-text {
    color: #bbb;
    font-style: italic;
}

/* --- Asset Table --- */
/* -------------------------------------------------------
   Main asset table - compact layout matching ledger style
   ------------------------------------------------------- */
.asb-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 11px;
    table-layout: auto;
}

.asb-table th {
    background-color: #f1f1f1;
    padding: 4px 4px;
    border: 1px solid #ccc;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1.3;
}

.asb-table td {
    padding: 3px 4px;
    border: 1px solid #ccc;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ---- Column width constraints (table-layout:auto) ---- */
/* All non-name columns: prevent unnecessary expansion + guarantee minimum width */
.col-checkbox { width: 28px; min-width: 28px; text-align: center; }
.col-img      { width: 36px; min-width: 36px; }
.col-asset-id { white-space: nowrap; min-width: 62px; }
.col-date     { white-space: nowrap; min-width: 78px; }
.col-account  { white-space: nowrap; min-width: 72px; }
/* Asset name: takes remaining space, protected from over-shrinking */
#asset-table th.col-name { white-space: nowrap; }
#asset-table td.col-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
    min-width: 160px;
    width: 99%;
}
/* Amount columns: compact, right-aligned, no expansion */
.col-price, .col-opening, .col-dep, .col-book, .col-expense {
    white-space: nowrap;
    min-width: 88px;
}
/* Ratio column */
.col-ratio { white-space: nowrap; min-width: 60px; }
/* Dropdown columns */
.col-classification, .col-classification_b, .col-classification_c {
    white-space: nowrap;
    min-width: 80px;
}
.col-location { white-space: nowrap; min-width: 88px; }
.col-status   { white-space: nowrap; min-width: 80px; }
/* Actions column */
.col-actions  { white-space: nowrap; min-width: 70px; }
/* Asset name icons (calendar, badge) - always visible, inline */
#asset-table td.col-name .asb-dl-calendar,
#asset-table td.col-name .asb-dl-badge {
    flex-shrink: 0;
}
/* Table container: horizontal scroll when very narrow */
.asb-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#asset-table {
    min-width: 900px;
}

/* Date column - prevent truncation */
#asset-table th.col-date,
#asset-table td.col-date {
    white-space: nowrap;
    overflow: visible;
    font-size: 11px;
}
/* Asset ID column - compact */
#asset-table th.col-asset-id,
#asset-table td.col-asset-id {
    white-space: nowrap;
    font-size: 11px;
}

/* Location / Status / Classification columns - compact selects */
#asset-table td.col-location,
#asset-table td.col-status,
#asset-table td.col-classification,
#asset-table td.col-classification_b,
#asset-table td.col-classification_c {
    padding: 2px 3px !important;
    overflow: hidden;
}
#asset-table td.col-location .inline-select,
#asset-table td.col-status .inline-select,
#asset-table td.col-classification .inline-select,
#asset-table td.col-classification_b .inline-select,
#asset-table td.col-classification_c .inline-select {
    max-width: 100%;
    font-size: 10px;
    padding: 1px 2px;
}

/* Expense Ratio column - narrow */
#asset-table th.col-ratio,
#asset-table td.col-ratio {
    white-space: nowrap;
}

/* IMAGE CELL: constrain image, allow hover popup */
.asb-table td.td-image {
    overflow: visible;
    position: relative;
    text-align: center;
    padding: 2px 3px;
    vertical-align: middle;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
}
.asb-table td.td-image .img-thumbnail-wrapper {
    overflow: visible;
    display: block;
    margin: 0 auto;
    position: relative;
    width: 28px;
    height: 28px;
}
.asb-table td.td-image .img-icon {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid #ddd;
    display: block;
}

.asb-table tr:hover {
    background-color: #f0f8ff;
}

.text-right {
    text-align: right;
}

/* --- Sortable table headers --- */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.sortable:hover {
    background-color: #e8e8e8;
}
.sort-arrows::after {
    content: ' \25B2\25BC';
    font-size: 8px;
    color: #bbb;
    letter-spacing: -2px;
}
.sort-asc .sort-arrows::after {
    content: ' \25B2';
    color: #0073aa;
    font-size: 10px;
}
.sort-desc .sort-arrows::after {
    content: ' \25BC';
    color: #0073aa;
    font-size: 10px;
}

/* --- Inline select (location/status dropdown in table) --- */
.inline-select {
    width: 100%;
    padding: 3px 4px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 11px;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
    box-sizing: border-box;
}
.inline-select:focus {
    border-color: #0073aa;
    outline: none;
}

/* --- Conditional section (edit modal, account-type dependent) --- */
.cond-section {
    border: 1px solid #e0d4f5;
    border-radius: 4px;
    padding: 10px 15px;
    margin-top: 12px;
    background: #faf8ff;
}
.cond-section-title {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #6f42c1;
    font-weight: bold;
    border-bottom: 1px solid #e0d4f5;
    padding-bottom: 6px;
}

/* --- Thumbnail & Hover Preview --- */
.img-thumbnail-wrapper {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 45px;
}

.img-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #eee;
}

.img-preview-popup {
    display: none;
    position: absolute;
    top: -20px;
    left: 70px;
    z-index: 1000;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border-radius: 4px;
    width: 250px;
    pointer-events: none;
}

.img-preview-popup img {
    width: 100%;
    height: auto;
    display: block;
}

.img-thumbnail-wrapper:hover .img-preview-popup {
    display: block;
}

/* --- Buttons --- */
.asb-btn {
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 11px;
    display: inline-block;
    text-decoration: none;
    line-height: 1.4;
    text-align: center;
    transition: background-color 0.2s;
}

.btn-primary {
    background-color: #0073aa;
    color: #fff;
}
.btn-primary:hover {
    background-color: #006799;
}

.btn-secondary {
    background-color: #f0f0f1;
    color: #333;
    border: 1px solid #999;
}
.btn-secondary:hover {
    background-color: #e5e5e5;
}

.btn-vr {
    background-color: #6f42c1;
    color: #fff;
    margin-right: 5px;
}
.btn-vr:hover {
    background-color: #5a32a3;
}
/* VR button: pin is registered for this asset */
.btn-vr-tagged {
    background-color: #2e7d32;
    color: #fff;
    margin-right: 5px;
}
.btn-vr-tagged:hover {
    background-color: #1b5e20;
}
/* VR button: no pin registered yet */
.btn-vr-untagged {
    background-color: #90a4ae;
    color: #fff;
    margin-right: 5px;
}
.btn-vr-untagged:hover {
    background-color: #607d8b;
}

.btn-search {
    background-color: #555;
    color: #fff;
}
.btn-search:hover {
    background-color: #333;
}

.btn-external {
    background-color: #fff;
    color: #6f42c1;
    border: 1px solid #6f42c1;
    margin-left: 10px;
}
.btn-external:hover {
    background-color: #f3ebff;
}

/* Small buttons for table action column */
.btn-sm {
    padding: 4px 10px;
    font-size: 11px;
}

/* Action buttons horizontal layout in table */
.action-buttons {
    display: flex;
    gap: 4px;
    justify-content: flex-start;
}

/* --- Modal --- */
.asb-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
}

.asb-modal-content {
    background-color: #fff;
    margin: 3vh auto;
    width: 95%;
    max-width: 900px;
    border-radius: 5px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    max-height: 94vh;
    position: relative;
}

.modal-header {
    padding: 12px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px 5px 0 0;
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 16px;
    color: #333;
    flex-shrink: 0;
}

/* Asset context display in modal header */
.modal-asset-context {
    flex: 1;
    margin-left: 12px;
    display: flex;
    align-items: center;
    min-width: 0;
}
.modal-asset-selector {
    width: 100%;
    max-width: 400px;
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    color: #333;
    height: 28px;
    box-sizing: border-box;
}

.close-modal {
    font-size: 28px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.close-modal:hover {
    color: #333;
}

/* --- Tab UI --- */
.asb-tabs {
    display: flex;
    background: #eee;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

.tab-link {
    flex: 1;
    padding: 10px 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: #666;
    border-right: 1px solid #ddd;
    transition: background 0.2s;
    font-size: 12px;
}

.tab-link:last-child {
    border-right: none;
}

.tab-link:hover {
    background-color: #e9e9e9;
}

.tab-link.active {
    background: #fff;
    color: #0073aa;
    border-bottom: 2px solid #fff;
    margin-bottom: -1px;
}

/* Scrollable body wrapper inside modal */
.modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.tab-content {
    display: none;
    padding: 20px;
}

.tab-content.active {
    display: block;
}

/* Save bar sticks to bottom of modal */
.form-save-bar {
    padding: 12px 20px;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    background: #f8f9fa;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* --- Form Elements --- */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.form-group {
    flex: 1;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 12px;
    color: #555;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 13px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #0073aa;
    outline: none;
    box-shadow: 0 0 3px rgba(0, 115, 170, 0.3);
}

.required-mark {
    color: #d63638;
    margin-left: 3px;
}

/* --- Image Dropzone (left side of photo row) --- */
.asb-image-dropzone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #fafafa;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.asb-image-dropzone:hover {
    border-color: #999;
    background: #f5f5f5;
}

.asb-image-dropzone.dragover {
    border-color: #2271b1;
    background: #f0f6fc;
    box-shadow: inset 0 0 10px rgba(34,113,177,0.1);
}

.dropzone-icon {
    font-size: 36px;
    color: #bbb;
    margin-bottom: 8px;
}

.dropzone-text {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.dropzone-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

.dropzone-buttons .asb-btn {
    font-size: 11px;
    padding: 5px 12px;
}

/* Image preview area (right side of photo row) */
.image-preview-area {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;
}

/* Image remove button - theme-isolated */
.image-preview-area .btn-remove-thumb,
#current-image-preview .btn-remove-thumb {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #d63638 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    outline: none !important;
}
.image-preview-area .btn-remove-thumb:hover,
#current-image-preview .btn-remove-thumb:hover {
    background: #a00 !important;
}

/* Maintenance history tab - match input sizes to other tabs */
#tab-history input[type="date"],
#tab-history input[type="text"],
#tab-history input[type="number"] {
    font-size: 13px !important;
    padding: 6px 8px !important;
    height: auto !important;
    line-height: 1.4 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}
#tab-history .asb-btn {
    font-size: 12px !important;
    padding: 6px 14px !important;
}

/* VR overlay thumbnail - no cropping, centered */
.asb-vr-overlay img,
#asb-mp-ov-thumb img,
#overlay-thumb img {
    max-width: 100%;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 6px auto;
    border-radius: 4px;
}

/* --- Maintenance History List --- */
.history-list {
    border: 1px solid #eee;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 10px;
    background: #fff;
}

.history-item {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.history-item:nth-child(even) {
    background: #f9f9f9;
}

.history-item:last-child {
    border-bottom: none;
}

/* --- VR Overlay Panel (MP -> WP info) --- */
.asb-vr-overlay {
    position: absolute;
    top: 50px;
    right: 15px;
    width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    background: rgba(255,255,255,0.96);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    z-index: 200;
    font-size: 13px;
    color: #333;
}

.asb-vr-overlay-header {
    padding: 8px 12px;
    background: #6f42c1;
    color: #fff;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.asb-vr-overlay-header strong {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    line-height: 1.3;
}
.asb-vr-overlay-header .ov-close-btn {
    flex-shrink: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    opacity: 0.85;
    padding: 0 2px;
}
.asb-vr-overlay-header .ov-close-btn:hover {
    opacity: 1;
}

.asb-vr-overlay-body {
    padding: 12px 14px;
}

.asb-vr-overlay-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.asb-vr-overlay-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.asb-vr-overlay-table td:first-child {
    font-weight: bold;
    color: #666;
    width: 80px;
    white-space: nowrap;
}

/* --- Matterport status message --- */
.mp-status-msg {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
    z-index: 300;
    display: none;
}

/* --- Tag Discovery Panel Items --- */
.discovery-tag-item {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 6px 8px;
    margin: 4px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.discovery-tag-item:hover {
    border-color: #6f42c1;
    background: rgba(111,66,193,0.15);
}

/* --- Admin Conditional Sections --- */
.asb-admin-cond {
    border: 1px solid #e0d4f5;
    border-radius: 4px;
    padding: 12px 15px;
    margin-top: 12px;
    background: #faf8ff;
}

.asb-admin-cond h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: #6f42c1;
    border-bottom: 1px solid #e0d4f5;
    padding-bottom: 6px;
}

/* --- Responsive Mobile --- */
@media (max-width: 768px) {
    .asb-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .asb-search-group {
        width: 100%;
        flex-wrap: wrap;
    }

    .asb-search-scope {
        width: 100%;
        margin-left: 0;
        margin-top: 2px;
    }

    .asb-table thead {
        display: none;
    }

    .asb-table tbody tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 8px;
        background: #fff;
        position: relative;
    }

    .asb-table tbody td {
        display: flex;
        justify-content: space-between;
        border: none;
        padding: 4px 8px;
        text-align: left !important;
        overflow: visible;
    }

    .asb-table tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 10px;
        color: #666;
    }

    /* Checkbox column in mobile card view */
    .asb-table tbody td.td-checkbox {
        position: absolute;
        top: 6px;
        right: 6px;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        border: none;
        padding: 0 !important;
        justify-content: flex-end;
    }
    .asb-table tbody td.td-checkbox::before {
        display: none;
    }

    .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .asb-vr-overlay {
        width: 100%;
        right: 0;
        top: auto;
        bottom: 0;
        max-height: 50vh;
        border-radius: 8px 8px 0 0;
    }

    .action-buttons {
        justify-content: flex-end;
    }

    .asb-image-dropzone {
        padding: 20px 15px;
    }

    .image-preview-area {
        min-height: 80px;
    }
}

/* =========================================
   Tag Discovery Panel - Link/Unlink UI
   ========================================= */

/* Summary bar */
.disc-summary {
    padding: 5px 10px;
    font-size: 11px;
    color: #aaa;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.disc-count-linked   { color: #66bb6a; }
.disc-count-unlinked { color: #777; }

/* Tag row */
.disc-tag-row {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 0.15s;
}
.disc-tag-row:hover { background: rgba(255,255,255,0.04); }
.disc-tag-linked    { border-left: 3px solid #66bb6a; }
.disc-tag-unlinked  { border-left: 3px solid #444; }

/* Header row inside tag */
.disc-tag-header {
    display: flex;
    align-items: center;
    gap: 5px;
}
.disc-dot {
    font-size: 10px;
    width: 12px;
    flex-shrink: 0;
}
.disc-tag-linked .disc-dot   { color: #66bb6a; }
.disc-tag-unlinked .disc-dot { color: #555; }
.disc-sid {
    flex: 1;
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
    color: #b39ddb;
    word-break: break-all;
}
.disc-label {
    font-size: 11px;
    color: #888;
    margin: 2px 0 4px 17px;
}

/* Linked status bar */
.disc-link-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: rgba(76,175,80,0.12);
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 11px;
}
.disc-linked-name {
    color: #81c784;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Unlinked: link area */
.disc-link-area { margin-top: 2px; }

/* Asset selector inside discovery panel */
.tag-asset-select {
    width: 100%;
    font-size: 11px;
    background: #1a1a2e;
    color: #eee;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 4px 5px;
    box-sizing: border-box;
}
.tag-selector-btns {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

/* Discovery panel micro-buttons */
.asb-btn-disc {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.6;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.asb-btn-disc:disabled { opacity: 0.5; cursor: default; }
.asb-btn-disc:hover:not(:disabled) { opacity: 0.85; }

.btn-disc-purple      { background: #6f42c1; color: #fff; }
.btn-disc-purple-wide { background: #7c4dff; color: #fff; width: 100%; text-align: center; padding: 4px 8px; }
.btn-disc-red         { background: #c62828; color: #fff; }
.btn-disc-green       { background: #388e3c; color: #fff; flex: 1; }
.btn-disc-gray        { background: #555;    color: #ccc; }

/* =========================================
   Attached Documents UI (Matterport/Docs tab)
   ========================================= */

.att-section-title {
    font-weight: bold;
    font-size: 12px;
    color: #555;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 4px;
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Attachment list */
.att-list {
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    min-height: 40px;
    background: #fafafa;
}

.att-empty {
    padding: 10px 12px;
    color: #999;
    font-size: 12px;
    margin: 0;
}

.att-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}
.att-item:last-child { border-bottom: none; }

/* File type icon badge */
.att-icon {
    display: inline-block;
    min-width: 36px;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    flex-shrink: 0;
}
.att-icon-pdf  { background: #d32f2f; }
.att-icon-xls  { background: #388e3c; }
.att-icon-doc  { background: #1565c0; }
.att-icon-img  { background: #f57c00; }
.att-icon-csv  { background: #00838f; }
.att-icon-zip  { background: #6d4c41; }
.att-icon-vid  { background: #6a1b9a; }
.att-icon-url  { background: #1976d2; }
.att-icon-file { background: #546e7a; }

/* Attachment label link */
.att-label {
    flex: 1;
    color: #1565c0;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.att-label:hover { text-decoration: underline; }

/* Add bar */
.att-add-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

/* Inline URL form */
.att-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    background: #f0f4ff;
    border: 1px solid #c5cae9;
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 4px;
}
.att-form-input {
    flex: 1;
    min-width: 160px;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    box-sizing: border-box;
}

/* =========================================
   Phase 2: VR Register Mode Panel
   ========================================= */

.vr-register-panel {
    position: absolute;
    top: 44px;
    right: 0;
    width: 280px;
    max-height: calc(100% - 44px);
    overflow-y: auto;
    background: rgba(15, 20, 40, 0.98);
    border-left: 3px solid #e65100;
    z-index: 200;
    font-size: 12px;
    color: #eee;
    display: flex;
    flex-direction: column;
    pointer-events: all;
}

/* When register panel is open, shrink the iframe so the panel does NOT overlay it.
   This prevents Matterport SDK from tracking cursor position inside the panel area,
   which caused pin position to shift when moving mouse to click panel buttons. */
#mp-iframe.panel-open {
    width: calc(100% - 280px) !important;
}

.vr-reg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    background: #e65100;
    font-weight: bold;
    font-size: 12px;
    color: #fff;
    flex-shrink: 0;
}

.vr-reg-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vr-reg-hint {
    font-size: 11px;
    color: #aaa;
    margin: 0;
    line-height: 1.5;
}

.vr-reg-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vr-reg-field label {
    font-size: 11px;
    color: #bbb;
    font-weight: bold;
}

.vr-reg-field input,
.vr-reg-field select {
    background: #1a1a2e;
    color: #eee;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 5px 7px;
    font-size: 11px;
    box-sizing: border-box;
    width: 100%;
}

/* Real-time position tracking indicator */
.vr-reg-pos-info {
    font-size: 10px;
    color: #90a4ae;
    font-family: monospace;
    background: rgba(0,0,0,0.4);
    padding: 5px 8px;
    border-radius: 3px;
    word-break: break-all;
    min-height: 22px;
    transition: color 0.2s;
}
/* Locked state - highlighted yellow */
.vr-reg-pos-info.is-locked {
    color: #ffcc00;
    background: rgba(255, 204, 0, 0.08);
    border: 1px solid rgba(255, 204, 0, 0.35);
}

/* Lock hint text */
.vr-reg-lock-hint {
    font-size: 10px;
    color: #78909c;
    text-align: center;
    padding: 2px 0;
}

/* Lock button row */
.vr-reg-lock-row {
    display: flex;
    gap: 6px;
}

/* Countdown lock button - main position lock mechanism */
.vr-reg-btn-countdown {
    flex: 2;
    background: #1565c0;
    color: #fff;
    border: none;
    padding: 8px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.3;
    text-align: center;
}
.vr-reg-btn-countdown:hover { background: #0d47a1; }
.vr-reg-btn-countdown.counting {
    background: #e65100;
    animation: pulse-btn 0.8s infinite alternate;
}
@keyframes pulse-btn {
    from { opacity: 0.85; }
    to   { opacity: 1; box-shadow: 0 0 8px rgba(230,81,0,0.7); }
}

/* Instant lock button - for when cursor is already on spot */
.vr-reg-btn-instant {
    flex: 1;
    background: #37474f;
    color: #fff;
    border: none;
    padding: 8px 4px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}
.vr-reg-btn-instant:hover { background: #546e7a; }
.vr-reg-btn-instant.locked { background: #2e7d32; }

/* Place Pin button - primary action */
.vr-reg-btn-place {
    width: 100%;
    background: #e65100;
    color: #fff;
    border: none;
    padding: 10px 0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    margin-top: 4px;
}
.vr-reg-btn-place:disabled {
    opacity: 0.35;
    cursor: default;
}
.vr-reg-btn-place:not(:disabled):hover {
    background: #bf360c;
}

/* Feedback message */
.vr-reg-feedback {
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: #fff;
    text-align: center;
    margin-top: 4px;
}

/* How-to guide */
.vr-reg-how {
    font-size: 10px;
    color: #90a4ae;
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
    padding: 6px 8px;
    margin-bottom: 6px;
}
.vr-reg-how p {
    margin: 0 0 3px 0;
    color: #bbb;
    font-weight: bold;
}
.vr-reg-how ol {
    margin: 0;
    padding-left: 16px;
    line-height: 1.7;
}

/* Placed pins header */
.vr-reg-placed-header {
    font-size: 10px;
    color: #90a4ae;
    margin-bottom: 4px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Placed pins session list */
.vr-reg-placed-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vr-reg-placed-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding: 4px 6px;
    color: #b0bec5;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
}

.vr-reg-placed-dot {
    color: #66bb6a;
    font-size: 10px;
    flex-shrink: 0;
}

.vr-reg-placed-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: underline dotted rgba(255,255,255,0.4);
}
.vr-reg-placed-name:hover {
    color: #fff;
    text-decoration: underline;
}

.vr-reg-placed-saving {
    flex-shrink: 0;
    font-size: 12px;
    opacity: 0.6;
    title: "Saved";
}

.vr-reg-empty-list {
    font-size: 10px;
    color: #546e7a;
    text-align: center;
    margin: 4px 0;
}

/* Delete pin button in session list */
.btn-delete-placed-pin {
    flex-shrink: 0;
    background: rgba(183,28,28,0.7);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 11px;
    padding: 2px 5px;
    cursor: pointer;
    line-height: 1.4;
}
.btn-delete-placed-pin:hover:not(:disabled) {
    background: rgba(183,28,28,1);
}
.btn-delete-placed-pin:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ==========================================================
   ASB Scene Manager - Generic Pin System
   ========================================================== */

/* ---- Scene Manager container ---- */
.asb-scene-manager {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #333;
}

/* ---- Scene list panel ---- */
.asb-scene-list-panel {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 16px;
}
.asb-scene-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.asb-scene-list-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.asb-scene-loading  { color: #888; }
.asb-scene-empty    { color: #888; font-style: italic; }
.asb-scene-error    { color: #c00; }

/* ---- Scene table ---- */
.asb-scene-table {
    width: 100%;
    border-collapse: collapse;
}
.asb-scene-table th,
.asb-scene-table td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.asb-scene-table th { background: #f5f5f5; font-weight: 600; font-size: 12px; }
.asb-scene-table tr:hover td { background: #fafafa; }
.asb-scene-name-cell { font-weight: 500; }
.asb-scene-actions-cell { white-space: nowrap; }

/* ---- Type badge ---- */
.asb-scene-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.asb-scene-type-image  { background: #e8f5e9; color: #2e7d32; }

/* ---- Shared buttons ---- */
.asb-btn         { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 4px; border: none; cursor: pointer; font-size: 13px; font-weight: 500; text-decoration: none; transition: opacity .15s; }
.asb-btn:hover   { opacity: .85; }
.asb-btn-primary   { background: #1976d2; color: #fff; }
.asb-btn-secondary { background: #e0e0e0; color: #333; }
.asb-btn-danger    { background: #d32f2f; color: #fff; }
.asb-btn-sm        { padding: 4px 10px; font-size: 12px; }
.asb-scene-close-btn { cursor: pointer; font-size: 20px; line-height: 1; color: #666; }
.asb-scene-close-btn:hover { color: #000; }

/* ---- Scene add/edit form ---- */
.asb-scene-form-panel {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 16px;
    max-width: 520px;
}
.asb-scene-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.asb-scene-form-header h4 { margin: 0; font-size: 15px; }
.asb-scene-field { margin-bottom: 12px; }
.asb-scene-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 12px; }
.asb-scene-field input[type="text"],
.asb-scene-field input[type="url"],
.asb-scene-field select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    box-sizing: border-box;
}
.asb-scene-field input:focus,
.asb-scene-field select:focus { outline: none; border-color: #1976d2; box-shadow: 0 0 0 2px rgba(25,118,210,.15); }
.asb-scene-type-toggle { display: flex; gap: 16px; }
.asb-scene-type-toggle label { font-weight: 400; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.asb-scene-hint { margin: 4px 0 0; font-size: 11px; color: #888; }
.asb-scene-form-footer { display: flex; gap: 8px; margin-top: 16px; }
.req { color: #c00; }

/* ---- Scene viewer modal ---- */
.asb-scene-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
}
.asb-scene-modal-inner {
    background: #111;
    border-radius: 6px;
    overflow: hidden;
    width: 90vw;
    height: 88vh;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    position: relative;
}
.asb-scene-modal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(0,0,0,.8);
    flex-shrink: 0;
    gap: 10px;
}
.asb-scene-modal-title {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.asb-scene-modal-actions { display: flex; align-items: center; gap: 10px; }
.asb-scene-modal-close {
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    line-height: 1;
}
.asb-scene-modal-close:hover { color: #f88; }
.asb-scene-edit-hint {
    text-align: center;
    background: rgba(230,81,0,.9);
    color: #fff;
    font-size: 12px;
    padding: 5px;
    flex-shrink: 0;
}
#btn-scene-edit-mode.active { background: #bf360c; box-shadow: 0 0 0 2px #ff8a65; }

/* ---- Scene container & overlay ---- */
.asb-scene-container {
    position: relative;
    flex: 1;
    min-height: 0;  /* Fix flex child overflow - prevents image clipping */
    overflow: hidden;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: flex-start;  /* top-aligned */
}
#asb-scene-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    pointer-events: none;
    border: none;
    user-select: none;
    -webkit-user-drag: none;
}
#asb-pnlm-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    border: none;
}
.asb-scene-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    /* Default: transparent - pass events to iframe below */
    pointer-events: none;
    background: transparent;
}
/* In edit mode overlay becomes interactive */
.asb-scene-overlay.edit-active {
    pointer-events: all;
    cursor: crosshair;
    background: rgba(230,81,0,0.05);
    z-index: 20;  /* Below pins-layer so pin buttons are clickable */
}
.asb-scene-pins-layer {
    position: absolute;
    inset: 0;
    z-index: 25;  /* Above overlay.edit-active(20) so pins receive events */
    pointer-events: none;  /* Pins themselves handle their own events */
}

/* ---- Pins ---- */
.asb-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: all;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 21;
    user-select: none;
}
.asb-pin-icon {
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    background: #7b1fa2;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
    transition: transform .15s;
    flex-shrink: 0;
}
.asb-pin:hover .asb-pin-icon,
.asb-pin:focus .asb-pin-icon {
    transform: rotate(-45deg) scale(1.2);
}
.asb-pin-label {
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 2px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    text-align: center;
}
.asb-pin-id {
    display: block;
    font-size: 9px;
    color: #90caf9;
    margin-bottom: 1px;
}
.asb-pin-delete {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #d32f2f;
    color: #fff;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.asb-pin-delete:hover { background: #b71c1c; }
.asb-pin:focus { outline: 2px solid #90caf9; border-radius: 50%; }

/* Draggable pin in edit mode */
.asb-pin.asb-pin-draggable { cursor: grab; }
.asb-pin.asb-pin-draggable:active { cursor: grabbing; }
.asb-pin.asb-pin-dragging {
    opacity: 0.7;
    z-index: 100;
    cursor: grabbing;
    transition: none !important;
}
.asb-pin-delete { z-index: 30; }

/* VR hotspot draggable in edit mode */
.pnlm-hotspot-base.asb-vr-draggable { cursor: grab !important; }
.pnlm-hotspot-base.asb-vr-draggable:active { cursor: grabbing !important; }

/* ---- Pin placement popup ---- */
.asb-pin-popup {
    position: fixed;
    z-index: 100010;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
    width: 260px;
}
.asb-pin-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #7b1fa2;
    color: #fff;
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    font-size: 13px;
}
.asb-pin-popup-close { cursor: pointer; font-size: 18px; line-height: 1; }
.asb-pin-popup-close:hover { color: #fce4ec; }
.asb-pin-popup-body { padding: 12px; }
.asb-pin-popup-footer { display: flex; gap: 6px; margin-top: 10px; }

/* ---- Asset brief overlay ---- */
.asb-scene-asset-overlay {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 100005;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 30px rgba(0,0,0,.3);
    width: 280px;
    overflow: hidden;
}
.asb-scene-asset-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #7b1fa2;
    color: #fff;
}
.asb-scene-asset-overlay-header .asb-scene-close-btn { color: #fff; }
.asb-scene-asset-overlay-header .asb-scene-close-btn:hover { color: #ffcdd2; }
.asb-scene-asset-title { font-weight: 600; font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asb-scene-asset-overlay-body { padding: 12px; }
.asb-scene-asset-thumb img { max-width: 100%; border-radius: 4px; margin-bottom: 8px; }
.asb-scene-asset-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.asb-scene-asset-table th { text-align: left; color: #888; padding: 3px 6px 3px 0; width: 85px; font-weight: 500; }
.asb-scene-asset-table td { padding: 3px 0; font-weight: 500; }
.asb-scene-asset-overlay-footer { padding: 8px 12px 12px; }

/* ==========================================================
   Scene Manager v2 - Pin Presets, 360VR, Shape Variants
   ========================================================== */

/* ---- Pin shape variants ---- */
.asb-pin-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
    transition: transform .15s;
}
.asb-pin:hover .asb-pin-icon,
.asb-pin:focus .asb-pin-icon { transform: scale(1.18); }

/* pin (teardrop) */
.asb-pin-shape-pin {
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}
.asb-pin-shape-pin .asb-pin-dashicon {
    transform: rotate(45deg);
}
.asb-pin:hover .asb-pin-shape-pin,
.asb-pin:focus .asb-pin-shape-pin { transform: rotate(-45deg) scale(1.18); }

/* circle */
.asb-pin-shape-circle {
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.7);
}

/* square */
.asb-pin-shape-square {
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,.7);
}

/* diamond */
.asb-pin-shape-diamond {
    border-radius: 3px;
    transform: rotate(45deg);
}
.asb-pin-shape-diamond .asb-pin-dashicon {
    transform: rotate(-45deg);
}
.asb-pin:hover .asb-pin-shape-diamond,
.asb-pin:focus .asb-pin-shape-diamond { transform: rotate(45deg) scale(1.18); }

/* Dashicons inside pins */
.asb-pin-dashicon {
    font-size: 14px;
    color: #fff;
    line-height: 1;
}

/* ---- Pin preset preview in popup ---- */
.asb-pin-preset-preview {
    margin-top: 6px;
    height: 34px;
    display: flex;
    align-items: center;
}
.asb-pin-preset-preview .asb-pin-icon {
    width: 28px;
    height: 28px;
}

/* ---- 360VR viewer ---- */
#asb-pnlm-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;  /* Pannellum needs mouse events */
}

/* Pannellum hotspot custom styles */
.asb-pnlm-hotspot,
.asb-pnlm-pin {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.5) !important;
    transition: transform .15s !important;
    position: relative !important;
}
.asb-pnlm-hotspot:hover,
.asb-pnlm-pin:hover { transform: scale(1.25) !important; }

.asb-pnlm-delete {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #d32f2f !important;
    color: #fff !important;
    border: none !important;
    font-size: 11px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

/* ---- 360VR capture button ---- */
.asb-vr360-capture-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: rgba(123,31,162,.92);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 24px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.4);
    transition: background .15s;
}
.asb-vr360-capture-btn:hover { background: rgba(74,20,140,.95); }

/* ---- Scene type badge: vr360 ---- */
.asb-scene-type-vr360 { background: #fce4ec; color: #ad1457; }

/* ---- vr360 hint text ---- */
#asb-scene-edit-hint-text { font-size: 12px; }

/* ==========================================================
   Scene Manager v3.1 - Hotspot tooltip, asset list panel
   ========================================================== */

/* ---- Pannellum hotspot: child dot element (does not affect positioning) ---- */
.asb-pnlm-dot {
    pointer-events: none;
    transition: transform .15s;
}
.pnlm-hotspot-base:hover .asb-pnlm-dot {
    transform: scale(1.15);
}

/* Tooltip below hotspot (asset name) */
.asb-pnlm-tooltip {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.82);
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    line-height: 1.4;
    z-index: 5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.asb-pnlm-tooltip .asb-pnlm-tt-id {
    display: block;
    font-size: 9px;
    color: #90caf9;
    margin-bottom: 1px;
}

/* ---- Scene asset list side panel ---- */
.asb-scene-side-panel {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 270px;
    max-height: calc(100% - 16px);
    overflow-y: auto;
    background: rgba(22,33,62,0.97);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    z-index: 50;
    font-size: 12px;
    color: #fff;
}
.asb-scene-side-header {
    padding: 9px 12px;
    background: #6f42c1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
    z-index: 2;
}
.asb-scene-side-close {
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    line-height: 1;
}
.asb-scene-side-close:hover { color: #fce4ec; }
.asb-scene-side-body {
    padding: 6px 0;
}

/* Asset rows in scene side panel (reuse Matterport pattern) */
.asb-scene-al-row {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: background .12s;
}
.asb-scene-al-row:hover { background: rgba(255,255,255,0.1); }
.asb-scene-al-row.active { background: rgba(111,66,193,0.3); }
.asb-scene-al-row-name { font-weight: 600; font-size: 12px; color: #eee; }
.asb-scene-al-row-sub  { font-size: 10px; color: #aaa; margin-top: 2px; }
.asb-scene-al-nav-icon { color: #6fcf97; margin-right: 4px; }

/* ---- Asset List toolbar button active state ---- */
#btn-scene-asset-list.active {
    background: #6f42c1;
    color: #fff;
    box-shadow: 0 0 0 2px #b388ff;
}

/* ==========================================================
   Asset List: Row Badges (Matterport / LINK) & Asset Name Link
   ========================================================== */
.td-asset-id {
    vertical-align: top;
    padding-top: 10px !important;
    min-width: 100px;
}
.asset-id-text {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}
.asb-row-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 4px;
    margin-top: 2px;
    user-select: none;
    letter-spacing: 0.3px;
    transition: opacity .15s;
}
.asb-row-badge:hover { opacity: .8; }
.badge-mp {
    background: #6a1b9a;
    color: #fff;
}
.badge-scene {
    background: #1976d2;
    color: #fff;
}

/* Asset name as clickable link */
a.asset-name-link {
    color: #1565c0;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}
a.asset-name-link:hover { color: #0d47a1; }

/* Action buttons area: separate VR / LINK / Edit */
.action-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.btn-action-mp {
    background: #6a1b9a !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 11px;
}
.btn-action-scene {
    background: #1565c0 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 11px;
}

/* ==========================================================
   Simple Asset Detail Modal
   ========================================================== */
.asb-detail-modal-content {
    max-width: 750px;
    width: 92%;
}
.detail-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.asb-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}
.asb-detail-table th,
.asb-detail-table td {
    padding: 3px 8px;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    vertical-align: top;
    line-height: 1.35;
}
.asb-detail-table th {
    width: 35%;
    color: #555;
    font-weight: 600;
    background: #f7f7f7;
    white-space: nowrap;
}
.asb-detail-table td {
    color: #222;
}
.asb-detail-table tr:last-child th,
.asb-detail-table tr:last-child td { border-bottom: none; }

/* Detail modal section headers */
.detail-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #6f42c1;
    padding: 6px 8px 3px;
    border-bottom: 2px solid #e0d4f5;
    margin-top: 8px;
    margin-bottom: 0;
}
/* Detail two-column layout */
.detail-columns {
    display: flex;
    gap: 12px;
}
.detail-columns .detail-col {
    flex: 1;
    min-width: 0;
}
/* Detail deadline mini-table */
.detail-dl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5px;
    margin-top: 4px;
}
.detail-dl-table th {
    background: #f5f5f5;
    padding: 2px 6px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    text-align: left;
}
.detail-dl-table td {
    padding: 2px 6px;
    border-bottom: 1px solid #eee;
}
.detail-dl-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
}
.detail-dl-badge.dl-over { background: #c62828; }
.detail-dl-badge.dl-urg  { background: #e65100; }
.detail-dl-badge.dl-warn { background: #f57f17; }
.detail-dl-badge.dl-ok   { background: #2e7d32; }

/* ============================================================
   Compact action buttons (asb-cbtn) for asset table
   ============================================================ */
.action-btns-compact {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.asb-cbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border: none;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
    letter-spacing: 0.2px;
}
.asb-cbtn:hover { opacity: .82; }
.asb-cbtn:disabled { opacity: .45; cursor: default; }
.asb-cbtn-vr     { background: #6a1b9a; color: #fff; }
.asb-cbtn-link   { background: #1565c0; color: #fff; }
.asb-cbtn-edit   { background: #546e7a; color: #fff; }

/* Table row: minimize height */
#asset-table tbody tr td {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    vertical-align: middle;
}
/* -------------------------------------------------------
   Asset table: DEFINITIVE image cell sizing.
   These ID-based rules win over all class-only rules.
   ------------------------------------------------------- */
#asset-table tbody td.td-image {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 2px 3px !important;
    overflow: visible !important;
    vertical-align: middle !important;
    text-align: center !important;
}
#asset-table tbody td.td-image .img-thumbnail-wrapper {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    position: relative !important;
    overflow: visible !important;
    margin: 0 auto !important;
    cursor: zoom-in;
}
#asset-table tbody td.td-image .img-icon {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    border: 1px solid #ddd !important;
    display: block !important;
}
#asset-table tbody td.td-image .img-preview-popup {
    left: 32px;
}

/* Asset list in VR modal panel */
.vr-asset-row {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: background .12s;
}
.vr-asset-row:hover { background: rgba(255,255,255,0.1); }
.vr-asset-row-name { font-weight: 600; font-size: 12px; color: #eee; }
.vr-asset-row-sub  { font-size: 10px; color: #aaa; margin-top: 2px; }

/* ============================================================
   [asb_matterport] shortcode panel
   ============================================================ */
.asb-mp-panel {
    display: flex;
    flex-direction: column;
    background: #1a1a2e;
    border-radius: 8px;
    overflow: hidden;
    min-height: 480px;
    height: 600px;
    font-size: 13px;
    color: #eee;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.asb-mp-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.5);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.asb-mp-panel-title {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    margin-right: 4px;
}
.asb-mp-space-sel {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 13px;
    max-width: 220px;
}
/* Larger buttons in matterport shortcode toolbar */
.asb-mp-toolbar .asb-cbtn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.3px;
}
.asb-mp-toolbar .asb-mp-panel-title {
    font-size: 14px;
}
.asb-mp-viewer-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.asb-mp-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f0f1a;
    color: #666;
    font-size: 14px;
}
.asb-mp-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.asb-mp-side-panel {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 270px;
    max-height: calc(100% - 16px);
    overflow-y: auto;
    background: rgba(22,33,62,0.97);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    z-index: 50;
    font-size: 12px;
}
.asb-mp-reg-panel {
    left: auto;
    right: 8px;
}
.asb-mp-side-header {
    padding: 9px 12px;
    background: #6f42c1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
}
.asb-mp-side-close {
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    line-height: 1;
}
.asb-mp-side-body {
    padding: 6px 0;
}
.asb-mp-reg-how ol {
    padding: 6px 10px 6px 24px;
    margin: 0;
    color: #bbb;
    font-size: 11px;
    line-height: 1.6;
}
.asb-mp-pos-info {
    margin: 6px 10px;
    padding: 5px 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    font-size: 11px;
    color: #aaa;
    font-family: monospace;
}
.asb-mp-lock-row {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
}
.asb-mp-reg-field {
    padding: 4px 10px;
}
.asb-mp-reg-field label {
    display: block;
    font-size: 10px;
    color: #aaa;
    margin-bottom: 3px;
}
.asb-mp-reg-field select,
.asb-mp-reg-field input {
    width: 100%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
}
.asb-mp-status { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); }

/* ============================================================
   asb-cbtn additional states (gray VR when no pin, red delete)
   ============================================================ */
.asb-cbtn-vr-empty {
    background: #9e9e9e;
    color: #fff;
}
.asb-cbtn-vr-empty:hover { background: #757575; }

.asb-cbtn-delete {
    background: #d32f2f;
    color: #fff;
}
.asb-cbtn-delete:hover { background: #b71c1c; }

/* Image cell global: overflow visible for hover preview (actual size set per-table below) */
.td-image {
    overflow: visible !important;
    vertical-align: middle;
    text-align: center;
}
/* Hover preview popup (generic - used by all tables) */
.img-thumbnail-wrapper {
    position: relative;
    display: inline-block;
    cursor: zoom-in;
}
.img-preview-popup {
    display: none;
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 999;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    padding: 3px;
    pointer-events: none;
    white-space: normal;
}
.img-preview-popup img {
    max-width: 180px;
    max-height: 180px;
    display: block;
}
.img-thumbnail-wrapper:hover .img-preview-popup { display: block; }

/* Actions cell: auto-width, allow 2-row wrap when narrow */
.td-actions {
    width: auto !important;
    min-width: 90px !important;
    padding: 3px 2px !important;
    vertical-align: middle;
    white-space: nowrap !important;
    overflow: visible !important;
}
/* Compact button cluster - always horizontal (defined above) */

/* ============================================================[asb_mp_spaces] shortcode - redesigned to match Scene Manager style
   ============================================================ */
.asb-mp-spaces-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #333;
}
/* Outer card panel */
.asb-mp-spaces-panel {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 16px;
}
.asb-mp-spaces-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.asb-mp-spaces-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}
/* Add/edit form */
.asb-mp-space-form {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.asb-mp-space-form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.asb-mp-space-form-row .form-group {
    flex: 1;
    min-width: 160px;
}
.asb-mp-space-form-row .form-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.asb-mp-space-form-row .form-group input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 13px;
}
/* Table - matches .asb-scene-table style */
/* Wrap in overflow-x:auto so narrow screens scroll rather than hide columns */
.asb-mp-spaces-panel .asb-mp-spaces-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.asb-mp-spaces-table {
    width: 100%;
    min-width: 480px;  /* prevents Actions column from vanishing */
    border-collapse: collapse;
    table-layout: auto;
}
.asb-mp-spaces-table th,
.asb-mp-spaces-table td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.asb-mp-spaces-table th {
    background: #f5f5f5;
    font-weight: 600;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}
/* Space Name: allow wrap so it doesn't steal Actions space */
.asb-mp-spaces-table td.col-name {
    word-break: break-word;
    min-width: 80px;
    max-width: 160px;
}
/* SID: monospace, truncate with ellipsis */
.asb-mp-spaces-table td.col-sid {
    font-family: monospace;
    font-size: 11px;
    max-width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Number columns: compact, centered */
.asb-mp-spaces-table td.col-num,
.asb-mp-spaces-table th.col-num {
    width: 60px;
    text-align: center;
    white-space: nowrap;
}
/* Actions: never compress below content width */
.asb-mp-spaces-table td.col-actions {
    white-space: nowrap;
    width: 1%;  /* shrink to content */
}
.asb-mp-spaces-table .asb-scene-actions-cell > div {
    flex-wrap: nowrap;
}
.asb-mp-spaces-table tr:hover td { background: #fafafa; }
.asb-mp-spaces-table .text-center { text-align: center; }
.asb-mp-spaces-table td code {
    background: #f0f0f0;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
    color: #555;
    word-break: break-all;
}
.mp-tag-loading { color: #aaa; font-style: italic; font-size: 11px; }

/*[asb_matterport] panel - matches content column width (no full-width breakout) */
.asb-mp-panel-outer {
    position: relative;
    width: 100%;
    max-width: 100%;
}
.asb-mp-panel {
    width: 100%;
    height: 75vh;
    min-height: 500px;
    box-sizing: border-box;
    border-radius: 8px;
}

/* Tag discovery: linked asset name - shows it is clickable */
.disc-nav-name {
    cursor: pointer;
}
.disc-tag-row:hover .disc-nav-name {
    text-decoration: underline;
    color: #6fcf97;
}
.disc-tag-row {
    cursor: pointer;
}
.disc-tag-row .disc-tag-header,
.disc-tag-row .disc-label {
    pointer-events: none;
}
.disc-tag-row button,
.disc-tag-row .disc-selector-wrap,
.disc-tag-row select {
    pointer-events: auto;
    cursor: default;
}

/* ============================================================
   VR Crosshair overlay (register mode position lock feedback)
   Horizontal and vertical lines are hidden; only the dot is used.
   ============================================================ */
.vr-ch-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.55);
    transition: top 0.06s linear, left 0.06s linear;
    pointer-events: none;
}
.vr-ch-h {
    /* horizontal line - hidden, dot only */
    display: none;
}
.vr-ch-v {
    /* vertical line - hidden, dot only */
    display: none;
}
/* Center dot - hidden, countdown badge is the only visual indicator */
.vr-ch-dot {
    display: none;
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: top 0.06s linear, left 0.06s linear;
}

/* Locked state: yellow tint, pulsing animation */
.vr-ch-line.ch-locked {
    background: rgba(255, 213, 64, 0.8);
    animation: ch-lock-pulse 0.4s ease-out 1;
}
.vr-ch-dot.ch-dot-locked {
    background: rgba(255, 213, 64, 1);
    border-color: rgba(255, 213, 64, 0.9);
    width: 10px;
    height: 10px;
    animation: ch-dot-pop 0.35s ease-out 1;
}

@keyframes ch-lock-pulse {
    0%   { opacity: 1; background: rgba(255,255,255,0.9); }
    40%  { opacity: 1; background: rgba(255,213,64,1); }
    100% { opacity: 1; background: rgba(255,213,64,0.8); }
}
@keyframes ch-dot-pop {
    0%   { transform: translate(-50%, -50%) scale(1); }
    40%  { transform: translate(-50%, -50%) scale(2.2); }
    100% { transform: translate(-50%, -50%) scale(1.1); }
}

/* Countdown badge */
#vr-countdown-badge {
    position: absolute;
    top: calc(50% - 80px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    pointer-events: none;
    backdrop-filter: blur(4px);
    animation: badge-tick 1s ease-in-out infinite;
}
@keyframes badge-tick {
    0%   { transform: translateX(-50%) scale(1);    opacity: 1; }
    50%  { transform: translateX(-50%) scale(1.08); opacity: 0.85; }
    100% { transform: translateX(-50%) scale(1);    opacity: 1; }
}

/* =============================================================
   Deadline / Alert Badge Styles
   ============================================================= */

/* Table row badges - inline after asset name */
.asb-dl-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.dl-badge-overdue {
    background: #c62828;
    color: #fff;
    animation: dl-pulse 1.2s ease-in-out infinite;
}
.dl-badge-urgent {
    background: #e65100;
    color: #fff;
    animation: dl-pulse 2s ease-in-out infinite;
}
.dl-badge-warning {
    background: #ef6c00;
    color: #fff;
}
.dl-badge-notice {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}
.dl-badge-completed {
    background: #e0e0e0;
    color: #757575;
    text-decoration: line-through;
}

@keyframes dl-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Deadline urgency highlight - asset name cell only */
tr.dl-overdue > td.col-name { background: rgba(198,40,40,0.15) !important; }
tr.dl-overdue:hover > td.col-name { background: rgba(198,40,40,0.22) !important; }
tr.dl-urgent > td.col-name { background: rgba(230,81,0,0.12) !important; }
tr.dl-urgent:hover > td.col-name { background: rgba(230,81,0,0.20) !important; }
tr.dl-warning > td.col-name { background: rgba(245,127,23,0.10) !important; }
tr.dl-warning:hover > td.col-name { background: rgba(245,127,23,0.18) !important; }
tr.dl-notice > td.col-name { background: rgba(255,243,224,0.7) !important; }
tr.dl-notice:hover > td.col-name { background: rgba(255,243,224,1.0) !important; }

/* Deadline table inside edit modal */
.asb-dl-table {
    font-size: 11px;
    margin-bottom: 16px;
    table-layout: auto;
}
.asb-dl-table thead th {
    background: #f5f5f5;
    font-weight: 600;
    padding: 5px 6px;
    font-size: 11px;
    border-bottom: 2px solid #ddd;
    white-space: nowrap;
}
.asb-dl-table tbody td {
    padding: 5px 6px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

/* Deadline table row urgency tint (inside edit modal) */
.asb-dl-table tbody tr[data-dl-urgency="overdue"] td {
    background: rgba(198,40,40,0.10);
}
.asb-dl-table tbody tr[data-dl-urgency="urgent"] td {
    background: rgba(230,81,0,0.08);
}
.asb-dl-table tbody tr[data-dl-urgency="warning"] td {
    background: rgba(245,127,23,0.06);
}

/* Action buttons inside deadline table */
.asb-dl-table .dl-actions {
    white-space: nowrap;
    display: flex;
    gap: 4px;
    align-items: center;
    overflow: visible;
    max-width: none;
}
.asb-dl-table td.dl-actions,
.asb-dl-table td:last-child {
    overflow: visible !important;
    max-width: none !important;
}
.asb-dl-table .dl-actions .asb-cbtn {
    padding: 2px 8px;
    font-size: 10px;
}
.asb-cbtn.asb-cbtn-del {
    background: #e53935;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    padding: 2px 7px;
}
.asb-cbtn.asb-cbtn-del:hover {
    background: #c62828;
}

/* Completed row styling */
.dl-row-completed td {
    opacity: 0.45;
    text-decoration: line-through;
}
.dl-row-completed .dl-actions {
    text-decoration: none;
}
.dl-row-completed .dl-actions .asb-cbtn {
    text-decoration: none;
}

/* Deadline form */
.dl-form-wrap {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px;
    margin-top: 8px;
}

/* Notification checkboxes - strictly horizontal */
.dl-notify-checkboxes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 4px 0;
}
.dl-notify-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

/* Quick add buttons */
.dl-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}
.dl-quick-btn {
    font-size: 11px !important;
    padding: 4px 12px !important;
    background: #e3f2fd !important;
    color: #1565c0 !important;
    border: 1px solid #90caf9 !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: background 0.15s;
}
.dl-quick-btn:hover {
    background: #bbdefb !important;
}

/* Deadline section title */
.dl-section {
    margin-bottom: 12px;
}

/* Complete dialog styling */
#asb-dl-complete-dialog .asb-modal-content {
    border-radius: 8px;
}
#asb-dl-complete-dialog .modal-body label {
    display: block;
    padding: 4px 0;
    cursor: pointer;
    font-size: 13px;
}
#asb-dl-complete-dialog .modal-body input[type="radio"] {
    margin-right: 6px;
}

/* Deadline filter dropdown in toolbar */
#filter-deadline {
    min-width: 120px;
}

/* Export button */
.btn-export {
    background: #546e7a !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 5px 12px !important;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    border: none;
}
.btn-export:hover {
    background: #37474f !important;
    color: #fff !important;
    text-decoration: none;
}

/* ============================================================
   Totals Row
   ============================================================ */
.asb-totals-row {
    background-color: #f5f5f5 !important;
    border-top: 2px solid #999 !important;
}
.asb-totals-row td {
    padding: 6px 4px !important;
    font-weight: bold;
    border-top: 2px solid #999 !important;
}

/* ============================================================
   Retired Row Styling
   ============================================================ */
.asb-row-retired {
    background-color: #e8e8e8 !important;
    color: #999 !important;
}
.asb-row-retired td {
    color: #999 !important;
}
.asb-row-retired a {
    color: #999 !important;
}
.asb-row-retired:hover {
    background-color: #ddd !important;
}
.asb-row-retired select.inline-select {
    color: #999;
    background-color: #eee;
}

/* ============================================================
   Row Checkbox Column
   ============================================================ */
.td-checkbox {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    text-align: center !important;
    padding: 2px !important;
}
.td-checkbox input[type="checkbox"],
#asb-select-all {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border: 1.5px solid #aaa;
    border-radius: 2px;
    background: #fff;
    vertical-align: middle;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.td-checkbox input[type="checkbox"]:checked,
#asb-select-all:checked {
    background: #0073aa;
    border-color: #0073aa;
}
.td-checkbox input[type="checkbox"]:checked::after,
#asb-select-all:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
/* Checked-only label in totals row */
.asb-checked-total-label {
    cursor: pointer;
    color: #666;
}

/* ============================================================
   Pagination
   ============================================================ */
.asb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
    padding: 8px 0;
    flex-wrap: wrap;
}
.asb-pagination .pag-info {
    font-size: 12px;
    color: #666;
    margin-right: 8px;
}
.asb-pagination .pag-btn {
    min-width: 32px;
    height: 30px;
    padding: 2px 8px;
    font-size: 12px;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #333 !important;
    cursor: pointer;
    border-radius: 3px;
    line-height: 1;
    text-decoration: none !important;
}
.asb-pagination .pag-btn:hover:not([disabled]) {
    background: #e3f2fd !important;
    border-color: #2196f3 !important;
    color: #1565c0 !important;
}
.asb-pagination .pag-btn.pag-active {
    background: #1976d2 !important;
    color: #fff !important;
    border-color: #1976d2 !important;
    font-weight: bold;
}
.asb-pagination .pag-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    color: #999 !important;
}

/* ===== Depreciation Calc Mode Badges ===== */
.dep-auto-badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 3px;
    vertical-align: middle;
    font-weight: 600;
    line-height: 1.6;
}
.dep-badge-auto {
    background: #d4edda;
    color: #155724;
}
.dep-badge-manual {
    background: #e2e3e5;
    color: #383d41;
}
.dep-badge-warn {
    background: #fff3cd;
    color: #856404;
}
/* Deadline auto-fetch toggle checkbox label */
.dl-auto-toggle-label {
    display: inline-block;
    font-size: 10.5px;
    font-weight: normal;
    color: #666;
    margin-left: 8px;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
}
.dl-auto-toggle-label input[type="checkbox"] {
    margin-right: 3px;
    vertical-align: middle;
    transform: scale(0.85);
}

/* ============================================================
   Column Drag Reorder
   ============================================================ */
.asb-draggable-col {
    cursor: grab;
}
.asb-draggable-col:active {
    cursor: grabbing;
}
.asb-draggable-col.asb-drag-over {
    border-left: 3px solid #0073aa !important;
    background-color: #e8f4fd !important;
}
.asb-draggable-col.asb-dragging {
    opacity: 0.4;
}

/* ============================================================
   Row Drag Handle
   ============================================================ */
.col-drag {
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    padding: 0 !important;
    text-align: center;
    position: relative;
    overflow: visible;
}
.asb-drag-handle {
    display: inline-block;
    cursor: grab;
    font-size: 14px;
    color: #999;
    line-height: 1;
    user-select: none;
    padding: 2px 3px;
}
.asb-drag-handle:hover {
    color: #333;
}
.asb-drag-handle:active {
    cursor: grabbing;
}
.td-drag {
    position: relative;
}

/* ============================================================
   Row Drag Feedback
   ============================================================ */
.asb-row-dragging {
    opacity: 0.4;
    background: #f0f0f0 !important;
}
.asb-drop-above {
    border-top: 3px solid #0073aa !important;
}
.asb-drop-below {
    border-bottom: 3px solid #0073aa !important;
}
/* Parent-child drop highlight: very visible */
.asb-drop-parent-highlight {
    background: #c8e2ff !important;
    box-shadow: inset 0 0 0 3px #0073aa !important;
}
/* JS-created tooltip shown during hold */
.asb-drop-parent-tooltip {
    position: fixed;
    background: #0073aa;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    animation: asb-tooltip-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes asb-tooltip-pulse {
    from { opacity: 0.85; }
    to   { opacity: 1; transform: scale(1.03); }
}

/* ============================================================
   Drag Page Navigation Zones
   ============================================================ */
.asb-drag-page-zone {
    position: absolute;
    left: 0;
    right: 0;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: rgba(0, 115, 170, 0.85);
    z-index: 999;
    pointer-events: none;
    animation: asb-page-zone-pulse 0.6s ease-in-out infinite alternate;
}
.asb-drag-page-top {
    bottom: 0;
    border-radius: 0 0 4px 4px;
}
.asb-drag-page-bottom {
    top: 0;
    border-radius: 4px 4px 0 0;
}
@keyframes asb-page-zone-pulse {
    from { opacity: 0.75; }
    to   { opacity: 1; }
}

/* ============================================================
   Parent-Child: Parent Row Styles
   ============================================================ */
.asb-parent-row > td {
    background: rgba(76, 175, 80, 0.07) !important;
}
.asb-parent-row:hover > td {
    background: rgba(76, 175, 80, 0.13) !important;
}

/* ============================================================
   Parent-Child: Child Row Styles
   ============================================================ */
.asb-child-row {
    background: #fff;
}

/* Child row: borderless checkbox cell, hide drag handle */
.asb-child-row .td-checkbox {
    border: none !important;
    background: #fff !important;
}
.asb-child-row .td-drag {
    border: none !important;
    background: #fff !important;
    position: relative;
    overflow: visible;
    padding: 0 !important;
}
/* Hide the normal drag handle on child rows (the one in the span) */
.asb-child-row > .td-drag > .asb-drag-handle {
    display: none !important;
}

/* Child indicator: full cell overlay, split into drag area (left) and L area (right) */
.asb-child-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: -1px;
    bottom: 0;
    display: flex;
    align-items: stretch;
    cursor: default;
}

/* Left half: drag area (invisible but grabbable in custom order mode) */
.asb-ci-drag-area {
    flex: 0 0 40%;
    cursor: default;
}
/* In custom order mode, show grab cursor on child drag area */
.asb-custom-order-active .asb-ci-drag-area {
    cursor: grab;
}
.asb-custom-order-active .asb-ci-drag-area:active {
    cursor: grabbing;
}

/* Right half: L/T-shape + detach hover zone */
.asb-ci-l-area {
    flex: 1;
    position: relative;
}

/* L-shape / T-shape drawn with pseudo-elements inside l-area */
/* Default: vertical line full height + horizontal at center = T-shape (for non-last child) */
.asb-ci-icon {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    width: 0;
    border-left: 1.5px solid #8bb0d6;
}
.asb-ci-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 0;
    border-top: 1.5px solid #8bb0d6;
}

/* Last child in group: vertical line stops at center = L-shape */
.asb-child-row.asb-last-child .asb-ci-icon {
    bottom: 50%;
}
/* Horizontal line at bottom of shortened vertical = exact L junction */
.asb-child-row.asb-last-child .asb-ci-icon::after {
    top: auto;
    bottom: 0;
}

/* Detach button: hidden, appears ONLY on L-area hover */
.asb-ci-detach {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #d63638;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 9px;
    line-height: 1;
    padding: 2px 5px;
    cursor: pointer;
    white-space: nowrap;
    z-index: 10;
}
.asb-ci-l-area:hover .asb-ci-detach {
    display: block;
}
.asb-ci-l-area:hover .asb-ci-icon {
    opacity: 0.3;
}
.asb-ci-detach:hover {
    background: #b32d2e;
}

/* Old detach button class - no longer used */
.asb-child-detach-btn {
    display: none !important;
}

/* ============================================================
   Custom Order: Header checkbox + active state
   ============================================================ */
/* Label positioned absolutely so it does NOT affect column width */
.asb-co-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: 8px;
    font-weight: normal;
    color: #888;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
    z-index: 2;
}
.asb-co-label input[type="checkbox"] {
    transform: scale(0.8);
    margin: 0;
}
/* Active state: subtle highlight on header */
.asb-custom-order-active .col-drag {
    background: rgba(0, 115, 170, 0.08);
}
/* Saved feedback flash */
.asb-co-saved {
    color: #1e6e1e !important;
}
.asb-co-saved span {
    color: #1e6e1e !important;
}
/* In custom order mode, show grab cursor on drag handles */
.asb-custom-order-active .asb-drag-handle {
    color: #0073aa;
}

/* ============================================================
   Parent-Child Info in Edit Modal
   ============================================================ */
.asb-pc-info {
    background: #f5f8fb;
    border: 1px solid #d0dce8;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 12px;
}
/* Status message at top */
.asb-pc-status {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.4;
}
.asb-pc-status-parent {
    color: #1e6e1e;
    font-weight: bold;
}
.asb-pc-status-child {
    color: #0059a6;
    font-weight: bold;
}
.asb-pc-status-independent {
    color: #777;
}
.asb-pc-status-note {
    color: #999;
    font-style: italic;
}
.asb-pc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.asb-pc-row-wrap {
    flex-wrap: wrap;
}
.asb-pc-row:last-child {
    margin-bottom: 0;
}
.asb-pc-label {
    font-weight: bold;
    color: #444;
    white-space: nowrap;
    min-width: 80px;
}
.asb-pc-value {
    flex: 1;
}
.asb-pc-link {
    color: #0073aa;
    text-decoration: none;
    cursor: pointer;
}
.asb-pc-link:hover {
    text-decoration: underline;
    color: #005177;
}
.asb-pc-detach-btn {
    font-size: 11px;
    padding: 2px 8px;
    background: #d63638;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.asb-pc-detach-btn:hover {
    background: #b32d2e;
}
/* Action buttons area */
.asb-pc-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e0e8f0;
}
.asb-pc-add-child-btn {
    font-size: 11px;
    padding: 3px 10px;
    background: #2e7d32;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.asb-pc-add-child-btn:hover {
    background: #1b5e20;
}
.asb-pc-btn-note {
    display: block;
    font-size: 9px;
    font-weight: normal;
    color: rgba(255,255,255,0.7);
    line-height: 1;
    margin-top: 1px;
}
.asb-pc-set-btn {
    font-size: 11px;
    padding: 2px 8px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.asb-pc-set-btn:hover {
    background: #005a87;
}

/* Parent search panel */
.asb-pc-search-panel {
    margin: 8px 0 4px;
    border: 1px solid #c8d8e8;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}
.asb-pc-search-header {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-bottom: 1px solid #e0e8f0;
}
.asb-pc-search-input {
    flex: 1;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #d0d8e0;
    border-radius: 3px;
    font-size: 13px;
    outline: none;
}
.asb-pc-search-input:focus {
    border-color: #0073aa;
    background: #fafcff;
}
.asb-pc-cancel-btn {
    font-size: 11px;
    padding: 4px 10px;
    background: #666;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.asb-pc-cancel-btn:hover {
    background: #555;
}
.asb-pc-search-note {
    padding: 4px 10px;
    font-size: 10px;
    color: #999;
    border-top: 1px solid #f0f4f8;
    background: #fafafa;
}
.asb-pc-search-results {
    max-height: 200px;
    overflow-y: auto;
}
.asb-pc-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #f0f4f8;
    transition: background 0.1s;
}
.asb-pc-result-item:last-child {
    border-bottom: none;
}
.asb-pc-result-item:hover {
    background: #e8f2ff;
}
.asb-pc-result-item.asb-pc-result-current {
    background: #f0f5fa;
    cursor: default;
    opacity: 0.6;
}
.asb-pc-result-item.asb-pc-result-saving {
    opacity: 0.5;
    pointer-events: none;
}
.asb-pc-result-label {
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.asb-pc-result-sub {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}
.asb-pc-result-badge {
    margin-left: auto;
    font-size: 10px;
    background: #d0dce8;
    color: #456;
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
}
.asb-pc-result-empty {
    padding: 12px 10px;
    text-align: center;
    color: #999;
    font-size: 12px;
}

/* Child tags with detach button */
.asb-pc-child-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #e8f0f8;
    border-radius: 3px;
    padding: 2px 4px 2px 6px;
    margin: 2px 4px 2px 0;
    font-size: 12px;
}
.asb-pc-child-tag .asb-pc-link {
    font-size: 12px;
}
.asb-pc-child-detach {
    background: #c55;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.asb-pc-child-detach:hover {
    background: #a33;
}

/* ============================================================
   Show Checked Only Button
   ============================================================ */
.btn-show-checked {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-show-checked:hover {
    background: #005a87;
}

/* ============================================================
   View Mode Toggle (List View / Edit Mode)
   Two-column edit layout, splitter resizer, inline edit panel.
   ============================================================ */

/* Toolbar toggle group - prominent toggle switch style */
.asb-view-mode-toggle {
    display: inline-flex;
    gap: 0;
    margin-right: 10px;
    border: 2px solid #0c7bb3;
    border-radius: 22px;
    overflow: hidden;
    background: #eaf4fb;
    padding: 2px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.asb-view-mode-toggle .asb-mode-btn {
    background: transparent;
    color: #0c7bb3;
    border: none;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 20px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.asb-view-mode-toggle .asb-mode-btn:hover:not(.is-active) {
    background: rgba(12, 123, 179, 0.1);
}
.asb-view-mode-toggle .asb-mode-btn.is-active {
    background: #0c7bb3;
    color: #fff;
    cursor: default;
    box-shadow: 0 1px 3px rgba(12, 123, 179, 0.35);
}
.asb-view-mode-toggle .asb-mode-btn.is-active:hover {
    background: #0c7bb3;
}

/* Split container - default (list mode): renders as plain block, no layout change */
.asb-split {
    display: block;
    position: relative;
}
.asb-split-list {
    display: block;
}
.asb-split-resizer {
    display: none;
}
.asb-split-edit {
    /* In list mode the wrapper is invisible so the edit modal keeps its overlay behaviour */
    display: contents;
}

/* ============================================================
   Edit Mode: 2-column grid with draggable resizer
   Activated by .asb-mode-edit on .asb-dashboard
   ============================================================ */
.asb-dashboard.asb-mode-edit .asb-split {
    display: grid;
    /* Custom property is updated by the resizer drag handler */
    grid-template-columns: var(--asb-split-list-width, 60%) 6px minmax(420px, 1fr);
    gap: 0;
    align-items: stretch;
    min-height: 60vh;
}
.asb-dashboard.asb-mode-edit .asb-split-list {
    grid-column: 1;
    min-width: 0; /* allow horizontal overflow inside */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.asb-dashboard.asb-mode-edit .asb-split-list .asb-table-wrap {
    flex: 1 1 auto;
    overflow-x: auto; /* allow horizontal scroll on the list side */
    overflow-y: visible;
}
.asb-dashboard.asb-mode-edit .asb-split-list .asb-pagination {
    flex: 0 0 auto;
}

/* Resizer bar */
.asb-dashboard.asb-mode-edit .asb-split-resizer {
    display: block;
    grid-column: 2;
    background: #d8dee5;
    cursor: col-resize;
    position: relative;
    user-select: none;
    transition: background 0.12s;
}
.asb-dashboard.asb-mode-edit .asb-split-resizer:hover,
.asb-dashboard.asb-mode-edit .asb-split-resizer.is-dragging {
    background: #0c7bb3;
}
.asb-dashboard.asb-mode-edit .asb-split-resizer::before {
    /* visual grip dots */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 28px;
    background: #fff;
    transform: translate(-50%, -50%);
    border-radius: 1px;
    opacity: 0.7;
}

/* Edit pane (right side) */
.asb-dashboard.asb-mode-edit .asb-split-edit {
    display: block;
    grid-column: 3;
    min-width: 0;
}

/* Edit modal: in edit mode, render inline (not as overlay) */
.asb-dashboard.asb-mode-edit #asb-edit-modal {
    display: block !important;
    position: static !important;
    background: transparent !important;
    width: auto;
    height: auto;
    z-index: auto;
    overflow: visible;
}
.asb-dashboard.asb-mode-edit #asb-edit-modal .asb-modal-content {
    position: static;
    margin: 0;
    width: 100%;
    max-width: none;
    min-width: 420px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-shadow: 0 0 0 1px #d8dee5;
    border-radius: 4px;
    transform: none;
    top: auto;
    left: auto;
}
/* Hide the close (X) button in edit mode - panel is always visible */
.asb-dashboard.asb-mode-edit #asb-edit-modal .modal-header .close-modal {
    display: none;
}

/* Empty state when no asset is selected in edit mode */
.asb-edit-empty-state {
    display: none;
    padding: 60px 24px;
    text-align: center;
    color: #888;
    font-size: 14px;
    background: #fafbfc;
    border: 1px dashed #c8d3df;
    border-radius: 4px;
    margin: 0;
}
.asb-dashboard.asb-mode-edit #asb-edit-modal.asb-edit-empty .asb-modal-content {
    display: none;
}
.asb-dashboard.asb-mode-edit #asb-edit-modal.asb-edit-empty .asb-edit-empty-state {
    display: block;
}

/* Highlight the row currently loaded in the edit panel */
.asb-dashboard.asb-mode-edit #asset-table tbody tr.asb-row-active > td {
    background: #e8f3fb !important;
}
.asb-dashboard.asb-mode-edit #asset-table tbody tr {
    cursor: pointer;
}
.asb-dashboard.asb-mode-edit #asset-table tbody tr:hover > td {
    background: #f0f7fc;
}

/* Hide thead in edit mode when admin disables it */
.asb-dashboard.asb-mode-edit.asb-edit-no-thead #asset-table thead {
    display: none;
}

/* Hide column headers and cells based on edit-mode column visibility.
   Controlled by classes set on .asb-dashboard.asb-mode-edit by JS:
   asb-em-hide-img, asb-em-hide-asset_id, asb-em-hide-date, etc. */
.asb-dashboard.asb-mode-edit.asb-em-hide-img       #asset-table .col-img,
.asb-dashboard.asb-mode-edit.asb-em-hide-asset_id  #asset-table .col-asset-id,
.asb-dashboard.asb-mode-edit.asb-em-hide-date      #asset-table .col-date,
.asb-dashboard.asb-mode-edit.asb-em-hide-account   #asset-table .col-account,
.asb-dashboard.asb-mode-edit.asb-em-hide-price     #asset-table .col-price,
.asb-dashboard.asb-mode-edit.asb-em-hide-opening   #asset-table .col-opening,
.asb-dashboard.asb-mode-edit.asb-em-hide-dep       #asset-table .col-dep,
.asb-dashboard.asb-mode-edit.asb-em-hide-book      #asset-table .col-book,
.asb-dashboard.asb-mode-edit.asb-em-hide-expense   #asset-table .col-expense,
.asb-dashboard.asb-mode-edit.asb-em-hide-ratio     #asset-table .col-ratio,
.asb-dashboard.asb-mode-edit.asb-em-hide-location  #asset-table .col-location,
.asb-dashboard.asb-mode-edit.asb-em-hide-status    #asset-table .col-status,
.asb-dashboard.asb-mode-edit.asb-em-hide-classification    #asset-table .col-classification,
.asb-dashboard.asb-mode-edit.asb-em-hide-classification_b  #asset-table .col-classification_b,
.asb-dashboard.asb-mode-edit.asb-em-hide-classification_c  #asset-table .col-classification_c,
.asb-dashboard.asb-mode-edit.asb-em-hide-checkbox  #asset-table .col-checkbox,
.asb-dashboard.asb-mode-edit.asb-em-hide-drag      #asset-table .col-drag {
    display: none !important;
}

/* Tighter table padding in edit mode to fit narrower width */
.asb-dashboard.asb-mode-edit #asset-table th,
.asb-dashboard.asb-mode-edit #asset-table td {
    padding-left: 4px;
    padding-right: 4px;
}

/* Body class to disable text selection while resizing */
body.asb-resizing,
body.asb-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Narrow viewport: fall back to single column visually but keep edit pane usable.
   Per requirement: edit pane keeps a min-width and the list side scrolls horizontally. */
@media (max-width: 900px) {
    .asb-dashboard.asb-mode-edit .asb-split {
        grid-template-columns: 1fr;
    }
    .asb-dashboard.asb-mode-edit .asb-split-resizer { display: none; }
    .asb-dashboard.asb-mode-edit .asb-split-edit { grid-column: 1; margin-top: 12px; }
    .asb-dashboard.asb-mode-edit #asb-edit-modal .asb-modal-content { min-width: 0; }
}

/* ============================================================
   Display Settings (Gear icon modal)
   Per-user preferences for column visibility, font size, items per page.
   ============================================================ */

/* Gear icon button next to keyword input */
.asb-gear-btn {
    background: transparent;
    border: 1px solid #c8d3df;
    color: #5c6975;
    border-radius: 4px;
    padding: 3px 6px;
    margin-left: 4px;
    cursor: pointer;
    line-height: 0;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.asb-gear-btn:hover {
    background: #f0f7fc;
    color: #0c7bb3;
    border-color: #0c7bb3;
}
.asb-gear-btn:active {
    background: #d6e8f3;
}
.asb-gear-btn svg {
    display: block;
    pointer-events: none;
}

/* Display Settings modal layout */
.asb-ds-modal-content {
    max-width: 640px;
    width: 92%;
}
.asb-ds-body {
    padding: 16px 20px;
    max-height: 70vh;
    overflow-y: auto;
}
.asb-ds-section {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eaeef2;
}
.asb-ds-section:last-child {
    border-bottom: none;
    margin-bottom: 4px;
    padding-bottom: 0;
}
.asb-ds-section-title {
    font-weight: bold;
    font-size: 13px;
    color: #2a3a4d;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #0c7bb3;
    display: inline-block;
    padding-right: 12px;
}

/* Radio group for font size */
.asb-ds-radio-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.asb-ds-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
}
.asb-ds-radio-group input[type="radio"] {
    margin: 0;
}

/* Items per page row */
.asb-ds-ipp-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.asb-ds-ipp-preset {
    padding: 3px 10px;
    font-size: 12px;
    background: #f4f6f8;
    color: #3a4452;
    border: 1px solid #c8d3df;
    border-radius: 3px;
    cursor: pointer;
}
.asb-ds-ipp-preset:hover {
    background: #e6ecf2;
}
.asb-ds-ipp-preset.is-active {
    background: #0c7bb3;
    color: #fff;
    border-color: #0c7bb3;
}

/* Column visibility checkbox grid */
.asb-ds-cols-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 4px 12px;
}
.asb-ds-cols-grid label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    padding: 3px 4px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.4;
}
.asb-ds-cols-grid label:hover {
    background: #f0f7fc;
}
.asb-ds-cols-grid input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
}

/* Footer */
.asb-ds-footer {
    padding: 10px 20px;
    border-top: 1px solid #eaeef2;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    background: #fafbfc;
}

/* Inline saved indicator (small text in modal header) */
.asb-ds-saved {
    margin-left: auto;
    margin-right: 16px;
    color: #2a7d2e;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
}

/* ============================================================
   List Mode Column Visibility (mirror of edit mode)
   Toggled by classes added to .asb-dashboard via JS.
   ============================================================ */
.asb-dashboard.asb-mode-list.asb-lm-hide-img       #asset-table .col-img,
.asb-dashboard.asb-mode-list.asb-lm-hide-asset_id  #asset-table .col-asset-id,
.asb-dashboard.asb-mode-list.asb-lm-hide-date      #asset-table .col-date,
.asb-dashboard.asb-mode-list.asb-lm-hide-account   #asset-table .col-account,
.asb-dashboard.asb-mode-list.asb-lm-hide-price     #asset-table .col-price,
.asb-dashboard.asb-mode-list.asb-lm-hide-opening   #asset-table .col-opening,
.asb-dashboard.asb-mode-list.asb-lm-hide-dep       #asset-table .col-dep,
.asb-dashboard.asb-mode-list.asb-lm-hide-book      #asset-table .col-book,
.asb-dashboard.asb-mode-list.asb-lm-hide-expense   #asset-table .col-expense,
.asb-dashboard.asb-mode-list.asb-lm-hide-ratio     #asset-table .col-ratio,
.asb-dashboard.asb-mode-list.asb-lm-hide-location  #asset-table .col-location,
.asb-dashboard.asb-mode-list.asb-lm-hide-status    #asset-table .col-status,
.asb-dashboard.asb-mode-list.asb-lm-hide-classification    #asset-table .col-classification,
.asb-dashboard.asb-mode-list.asb-lm-hide-classification_b  #asset-table .col-classification_b,
.asb-dashboard.asb-mode-list.asb-lm-hide-classification_c  #asset-table .col-classification_c,
.asb-dashboard.asb-mode-list.asb-lm-hide-checkbox  #asset-table .col-checkbox,
.asb-dashboard.asb-mode-list.asb-lm-hide-drag      #asset-table .col-drag {
    display: none !important;
}

/* ============================================================
   Font Size (small / medium / large)
   Applied to .asb-dashboard root - cascades to table and modal.
   Small (default) keeps current sizes; medium/large scale up.
   ============================================================ */
/* Small is the baseline (no override needed) */
.asb-dashboard.asb-fs-xsmall #asset-table {
    font-size: 10.5px;
}
.asb-dashboard.asb-fs-xsmall #asset-table th,
.asb-dashboard.asb-fs-xsmall #asset-table td {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.2;
}
.asb-dashboard.asb-fs-small #asset-table {
    font-size: 12px;
}
.asb-dashboard.asb-fs-medium #asset-table {
    font-size: 13.5px;
}
.asb-dashboard.asb-fs-medium #asset-table th,
.asb-dashboard.asb-fs-medium #asset-table td {
    padding-top: 5px;
    padding-bottom: 5px;
}
.asb-dashboard.asb-fs-large #asset-table {
    font-size: 15px;
}
.asb-dashboard.asb-fs-large #asset-table th,
.asb-dashboard.asb-fs-large #asset-table td {
    padding-top: 6px;
    padding-bottom: 6px;
}
/* Toolbar font scaling */
.asb-dashboard.asb-fs-xsmall .asb-toolbar { font-size: 11px; }
.asb-dashboard.asb-fs-medium .asb-toolbar { font-size: 13px; }
.asb-dashboard.asb-fs-large  .asb-toolbar { font-size: 14px; }
/* Pagination font scaling */
.asb-dashboard.asb-fs-xsmall .asb-pagination { font-size: 11px; }
.asb-dashboard.asb-fs-medium .asb-pagination { font-size: 13px; }
.asb-dashboard.asb-fs-large  .asb-pagination { font-size: 14px; }

/* ============================================================
   Row Density (compact / standard / comfortable)
   Applied via classes on .asb-dashboard root.
   ============================================================ */
.asb-dashboard.asb-rd-compact #asset-table th,
.asb-dashboard.asb-rd-compact #asset-table td {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.25;
}
.asb-dashboard.asb-rd-standard #asset-table th,
.asb-dashboard.asb-rd-standard #asset-table td {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.4;
}
.asb-dashboard.asb-rd-comfortable #asset-table th,
.asb-dashboard.asb-rd-comfortable #asset-table td {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.55;
}
/* Compact mode image thumbnails shrink slightly */
.asb-dashboard.asb-rd-compact .td-image img {
    max-height: 24px;
}
.asb-dashboard.asb-rd-comfortable .td-image img {
    max-height: 40px;
}

/* Total row visibility toggle */
.asb-dashboard.asb-hide-total #asset-table tfoot {
    display: none;
}

/* Gear button visibility for all roles (was inside $show_edit_btn before) */
.asb-toolbar-right .asb-gear-btn {
    margin-right: 2px;
}