/* =====================================================
   1. TABLE BEHAVIOUR EXTENSIONS (NOT BASE)
   ===================================================== */

/* Explicit opt-in for wrapped text */
.wrap-text {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Optional ellipsis helper */
.dt-ellipsis {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================
   2. DATATABLE VISUAL ENHANCEMENTS
   ===================================================== */

table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 0.25rem;
}

    table.dataTable thead th {
        background-color: #d8e2ec;
        color: #2c3e50;
        font-weight: 600;
        border: none;
    }

    table.dataTable tbody tr {
        background-color: #ffffff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

        table.dataTable tbody tr:hover {
            background-color: #f1f4f8;
        }

    /* Action buttons inside tables */
    table.dataTable .btn {
        width: 35px;
        height: 35px;
        padding: 0;
        font-size: 14px;
    }

/* Empty table message */
.dataTables_empty {
    text-align: center;
    font-style: italic;
    color: #6c757d;
    padding: 2rem !important;
}

/* =====================================================
   3. DATATABLE CONTROLS
   ===================================================== */

.dataTables_length label,
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dataTables_length select,
.dataTables_filter input {
    height: 2rem;
    padding: 0.25rem 0.5rem;
}

@media (max-width: 768px) {
    .dataTables_length,
    .dataTables_filter {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* =====================================================
   4. MODAL VISUAL THEME (NOT BEHAVIOUR)
   ===================================================== */

.modal-header {
    background: #e0e8f0;
    color: #2c3e50;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.modal-title {
    font-weight: 600;
    font-size: 1.25rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: none;
    padding: 1rem 1.5rem;
    background-color: #f0f2f5;
}

/* Delete modal special case */
#dvDelete .alert-warning {
    border-radius: 8px;
    background-color: #fff4d3;
}

/* =====================================================
   5. EMBEDDED VIDEO HELPER
   ===================================================== */

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

    .video-wrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* =====================================================
   6. BOOTBOX TABLE HELPERS
   ===================================================== */

.bootbox table.crud-table {
    table-layout: fixed;
    width: 100%;
}

    .bootbox table.crud-table th,
    .bootbox table.crud-table td {
        white-space: normal;
        word-break: break-word;
        vertical-align: middle;
    }

        .bootbox table.crud-table td.action {
            text-align: center;
            white-space: nowrap;
        }

/* mvp2 features */
.mvp2 {
    padding-left: 5px !important;
    border: 1px dashed var(--rich-black) !important;
}

/* quill editor */
/* Reset counter at start of each list */  
.ql-editor li[data-list="bullet"]::before {
    content: "• ";
    margin-right: 8px;
} 
/*.ql-insertHTML::after {
    content: "[]";
    font-weight: bold;
}*/