/**
 * File Path: assets/css/admin/formatting/formatting-order-controls.css
 * Order controls — Up/Down arrow table (fallback) + drag-and-drop sortable list
 * Component of mbs-admin-settings-formatting.css — extracted Session 100.
 * Enqueued by MBS_Tab_Formatting with dep: mbs-admin-settings-formatting.
 */

/**
 * File Path: assets/css/mbs-admin-settings-formatting.css
 * Formatting tab styles — section-order sortable list and arrow-table fallback; loaded when tab is active.
 * @package MyBookShowroom
 * @since   1.0.0
 */

/* Option 1: Up/Down Arrows Table (fallback) */
.mbs-section-order-table {
    margin-top: 8px;
    border-collapse: collapse;
    width: 100%;
}

.mbs-section-order-table th,
.mbs-section-order-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #c3c4c7;
    vertical-align: middle;
}

.mbs-section-order-table thead th {
    background: #f6f7f7;
    font-weight: 600;
}

.mbs-section-order-table .mbs-drag-handle {
    width: 40px;
    color: #a7aaad;
}

.mbs-section-order-table button {
    margin: 0 2px;
    min-width: 28px;
}

.mbs-reset-order {
    margin-top: 12px;
}

/* Option 2: Drag-and-Drop Sortable List (default) */
.mbs-sortable-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    border: 1px solid #c3c4c7;
    background: #fff;
    border-radius: 4px;
    min-height: 40px;
}

.mbs-sortable-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f1;
    background: #fff;
    display: flex;
    align-items: center;
    cursor: move;
    user-select: none;
}

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

.mbs-sortable-item .mbs-drag-handle {
    margin-right: 12px;
    color: #a7aaad;
    font-size: 18px;
    line-height: 1;
}

.mbs-sortable-item:hover {
    background: #f6f7f7;
}

/* Hide arrow table when sortable is active */
#mbs-section-order-table {
    display: none;
}

/* Show arrow-table fallback when JS is disabled */
html.no-js #mbs-section-order-table {
    display: table !important;
}
/* #mbs-section-sortable stays display:none (default set above) */


/* -------------------------------------------------------------------------
 * UX-NAV-002-001: Section visibility checkbox — Formatting tab
 * Added Session 195.
 * ------------------------------------------------------------------------- */

/* Label wrapping the visibility checkbox in the sortable list item */
.mbs-sortable-item .mbs-section-visibility {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding-left: 12px;
    cursor: pointer;
    font-size: 13px;
    color: #3c434a;
    user-select: none;
}

/* Dim the drag label when the section is hidden by default */
.mbs-sortable-item:has(.mbs-section-visibility input:not(:checked)) .mbs-sortable-label,
.mbs-sortable-item.mbs-section-dimmed .mbs-sortable-label {
    opacity: 0.45;
    font-style: italic;
}
